vue computed 计算属性简述

Vue 的 ‌计算属性（Computed Properties）‌ 是 Vue 实例中一种特殊的属性，用于‌声明式地定义依赖其他数据动态计算得出的值‌。它的核心优势在于能够自动追踪依赖关系，并缓存计算结果，避免重复计算，提升性能。

计算属性的特点

1. ‌依赖追踪‌
   计算属性会自动检测其内部依赖的响应式数据（如 data 中的属性或其他计算属性）。当依赖的数据变化时，计算属性会重新计算。

2. ‌缓存机制‌
   计算属性的结果会被缓存，只有依赖的数据变化时才会重新计算。多次访问计算属性时，若依赖未变化，直接返回缓存值。

3. ‌声明式语法‌
   将复杂逻辑封装在计算属性中，使模板代码更简洁，逻辑更易维护。

在 Vue 组件的 computed 选项中定义计算属性：

export default {data() {return {firstName: 'John',lastName: 'Doe'};},computed: {fullName() {return this.firstName + ' ' + this.lastName;}}
};

 在模板中直接使用：

<p>{{ fullName }}</p> <!-- 输出：John Doe -->

‌计算属性的 Setter‌

默认情况下，计算属性是只读的，但可以通过定义 get 和 set 实现双向绑定：

computed: {fullName: {get() {return this.firstName + ' ' + this.lastName;},set(newValue) {const names = newValue.split(' ');this.firstName = names;this.lastName = names;}}
}

‌适用场景‌

1. ‌数据格式化‌
   如：将日期格式化为 YYYY-MM-DD，或金额添加货币符号。
2. ‌复杂逻辑封装‌
   如：根据购物车商品列表计算总价。
3. ‌依赖多数据的动态值‌
   如：根据筛选条件过滤列表数据。

‌计算属性 vs 方法‌

1. ‌语法差异‌

   • 计算属性在模板中直接以属性形式调用（如 {{ fullName }}）。
   • 方法需要在模板中调用（如 {{ getFullName() }}）。

2. ‌性能优化‌

   • 计算属性有缓存，依赖不变时不会重复计算。
   • 方法每次渲染都会重新执行。

‌计算属性 vs 侦听器（Watch）‌

• ‌计算属性‌适合‌同步计算‌新值，且结果需要被复用。
• ‌侦听器（watch）‌适合在数据变化时‌执行异步操作‌或复杂逻辑。

‌总结‌

• ‌用途‌：简化模板逻辑，封装响应式计算。
• ‌优势‌：自动依赖追踪、高效缓存、代码可维护性高。
• ‌注意‌：避免在计算属性中执行副作用操作（如修改 DOM 或发起请求）。