AI Summary 38.11416.0 Vue3 computed 属性摘要 2026-07-19
Vue3 Computed 属性 Vue3 选项式 API Computed 属性是 Vue.js 中用于声明依赖于其他数据的计算属性的方式。 Computed 可以让你将复杂的逻辑封装在一个属性中，并在模板中像普通数据一样使用它。Computed 属性的值会根据其依赖的数据自动更新，因此在数据变化时，computed 属性也会自动重新计算。 为什么要使用 Computed 属性？ 简化模板逻辑在 Vue 中，直接在模板中编..

Vue3 Computed 属性

Vue3 选项式 API Vue3 选项式 API

Computed 属性是 Vue.js 中用于声明依赖于其他数据的计算属性的方式。

Computed 可以让你将复杂的逻辑封装在一个属性中，并在模板中像普通数据一样使用。

Computed 属性的值会根据其依赖的数据自动更新，因此在数据变化时，computed 属性也会自动重新计算。

为什么要使用 Computed 属性？

  1. 简化模板逻辑
    在 Vue 中，直接在模板中编写复杂的逻辑可能会导致代码难以维护。通过 computed 属性，你可以将复杂逻辑从模板中移出，使代码更加清晰。

  2. 性能优化
    Computed 属性是基于其依赖的数据进行缓存的。只有当依赖的数据发生变化时，computed 属性才会重新计算。这种机制可以避免不必要的计算，提升性能。

  3. 响应式更新
    Vue 的响应式系统会自动追踪 computed 属性的依赖，并在依赖变化时重新计算值，从而确保数据始终保持最新状态。

如何使用 Computed 属性？

在 Vue3 中，computed 属性可以通过 computed 函数来定义。下面是一个简单的示例：

实例

import { ref, computed } from 'vue';

export default {
  setup() {
    // 定义一个响应式数据
    const firstName = ref('John');
    const lastName = ref('Doe');

    // 定义一个 computed 属性
    const fullName = computed(() => {
      return `${firstName.value} ${lastName.value}`;
    });

    return {
      firstName,
      lastName,
      fullName,
    };
  },
};

代码解析

  1. ref 函数
    用于创建响应式数据。firstName 和 lastName 是响应式变量。
  2. computed 函数
    用于定义计算属性。fullName 是一个 computed 属性，依赖于 firstName 和 lastName。
  3. 模板中使用
    在模板中，你可以直接使用 fullName，会根据 firstName 和 lastName 的值自动更新。

Computed 属性的缓存机制

Computed 属性的值会被缓存，只有当其依赖的数据发生变化时，才会重新计算。例如：

实例

const count = ref(0);
const doubleCount = computed(() => count.value * 2);

console.log(doubleCount.value); // 输出 0
count.value = 2;
console.log(doubleCount.value); // 输出 4

在这个例子中，doubleCount 的值只有在 count 发生变化时才会重新计算。

Computed 属性 vs Methods

Computed 属性和 methods 都可以用于封装逻辑，但们有以下区别：

  1. 缓存
    Computed 属性会缓存结果，而 methods 每次调用都会重新执行。
  2. 性能
    如果逻辑比较复杂且需要频繁调用，使用 computed 属性可以提升性能。
  3. 使用场景
    Computed 属性适合用于依赖其他数据计算的值，而 methods 适合用于执行操作或处理事件。

示例对比：

实例

const count = ref(0);

// 使用 computed 属性
const doubleCount = computed(() => count.value * 2);

// 使用 methods
function getDoubleCount() {
  return count.value * 2;
}

Vue3 选项式 API Vue3 选项式 API