Vue3 Computed 属性

Vue3 选项式 API

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

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

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

为什么要使用 Computed 属性？

简化模板逻辑
在 Vue 中，直接在模板中编写复杂的逻辑可能会导致代码难以维护。通过 computed 属性，你可以将复杂逻辑从模板中移出，使代码更加清晰。
性能优化
Computed 属性是基于其依赖的数据进行缓存的。只有当依赖的数据发生变化时，computed 属性才会重新计算。这种机制可以避免不必要的计算，提升性能。
响应式更新
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,
};
},
};

代码解析

ref 函数
用于创建响应式数据。firstName 和 lastName 是响应式变量。
computed 函数
用于定义计算属性。fullName 是一个 computed 属性，它依赖于 firstName 和 lastName。
模板中使用
在模板中，你可以直接使用 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 都可以用于封装逻辑，但它们有以下区别：

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

示例对比：

实例

const count = ref(0);

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

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

Vue3 选项式 API