vue计算属性 实现
计算属性的基本概念
计算属性（Computed Properties）是 Vue 中用于声明式依赖计算的特性。它会基于响应式依赖进行缓存，仅在依赖发生变化时重新计算，适合处理复杂逻辑或需要频繁计算的场景。
计算属性的定义方式
在 Vue 组件中，通过 computed 选项定义计算属性。计算属性可以是函数或包含 get/set 的对象：
export default {
computed: {
// 简写形式（仅 getter）
fullName() {
return this.firstName + ' ' + this.lastName;
},
// 完整形式（支持 getter 和 setter）
reversedMessage: {
get() {
return this.message.split('').reverse().join('');
},
set(newValue) {
this.message = newValue.split('').reverse().join('');
}
}
}
}计算属性的缓存特性
计算属性会缓存结果，只有当依赖的响应式数据（如 firstName、lastName）变化时才会重新计算。与方法（methods）不同，方法每次调用都会执行函数体。
计算属性 vs 侦听器（watch）
- 计算属性：适合基于多个依赖返回一个新值的场景（如拼接字符串、过滤列表）。
- 侦听器：适合在数据变化时执行异步操作或复杂逻辑（如发送请求）。
计算属性的常见应用场景
- 数据格式化：如日期格式化、货币符号添加。
- 条件过滤：对列表数据进行过滤或排序。
- 依赖组合：合并多个响应式数据为一个新值（如全名、地址拼接）。
示例：列表过滤
computed: {
filteredList() {
return this.list.filter(item => item.includes(this.searchKeyword));
}
}注意事项
- 避免在计算属性中执行异步操作或副作用（如修改 DOM）。
- 计算属性应保持纯函数特性，仅依赖响应式数据并返回计算结果。
- 对于需要响应式更新的复杂逻辑，优先使用计算属性而非方法。
