Vue 的 计算属性（Computed Properties） 是 Vue 实例中一种特殊的属性，用于声明式地定义依赖其他数据动态计算得出的值。它的核心优势在于能够自动追踪依赖关系，并缓存计算结果，避免重复计算，提升性能。
计算属性的特点
依赖追踪
计算属性会自动检测其内部依赖的响应式数据（如data中的属性或其他计算属性）。当依赖的数据变化时，计算属性会重新计算。缓存机制
计算属性的结果会被缓存，只有依赖的数据变化时才会重新计算。多次访问计算属性时，若依赖未变化，直接返回缓存值。声明式语法
将复杂逻辑封装在计算属性中，使模板代码更简洁，逻辑更易维护。
在 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;
}
}
}
适用场景
- 数据格式化
如：将日期格式化为YYYY-MM-DD，或金额添加货币符号。- 复杂逻辑封装
如：根据购物车商品列表计算总价。- 依赖多数据的动态值
如：根据筛选条件过滤列表数据。
计算属性 vs 方法
语法差异
- 计算属性在模板中直接以属性形式调用（如
{{ fullName }}）。- 方法需要在模板中调用（如
{{ getFullName() }}）。性能优化
- 计算属性有缓存，依赖不变时不会重复计算。
- 方法每次渲染都会重新执行。
计算属性 vs 侦听器（Watch）
- 计算属性适合同步计算新值，且结果需要被复用。
- 侦听器（watch）适合在数据变化时执行异步操作或复杂逻辑。
总结
- 用途：简化模板逻辑，封装响应式计算。
- 优势：自动依赖追踪、高效缓存、代码可维护性高。
- 注意：避免在计算属性中执行副作用操作（如修改 DOM 或发起请求）。
