vue计算属性如何实现
Vue 计算属性的实现方法
计算属性（Computed Properties）是 Vue 中用于声明式依赖计算的特性，常用于处理复杂逻辑或依赖其他数据的变化。以下是实现计算属性的核心方法：
基本语法
在 Vue 组件选项中定义 computed 属性，其值为一个对象，键为计算属性名称，值为函数或包含 get/set 的对象：
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('');
}
}
}依赖缓存机制
计算属性基于其依赖的响应式数据进行缓存，只有当依赖变化时才会重新计算。多次访问同一计算属性会直接返回缓存结果，避免重复计算：
// 仅当 this.a 或 this.b 变化时重新计算
sum() {
return this.a + this.b;
}与方法的区别
相比方法调用，计算属性适合模板中频繁使用的派生数据。方法调用每次渲染都会执行，而计算属性仅在依赖变化时更新：
<!-- 方法调用：每次渲染执行 -->
<p>{{ calculateSum() }}</p>
<!-- 计算属性：依赖变化才更新 -->
<p>{{ sum }}</p>与侦听器的对比
watch 适用于异步或开销较大的操作，而计算属性适合同步派生数据：
watch: {
firstName(val) {
// 需要手动处理逻辑
this.fullName = val + ' ' + this.lastName;
}
}动态依赖更新
计算属性会自动追踪依赖，当依赖的响应式数据变化时触发更新。例如数组操作或嵌套对象属性变化：
computed: {
filteredList() {
return this.list.filter(item => item.active);
}
}TypeScript 支持
在 Vue 3 + TypeScript 中，可通过泛型明确计算属性类型：
computed: {
total(): number {
return this.items.reduce((sum, item) => sum + item.price, 0);
}
}注意事项
- 避免在计算属性中产生副作用（如异步操作或修改外部状态）
- 复杂计算属性可拆分为多个简单属性组合
- Vue 3 的
setup()中可使用computed()函数：import { computed } from 'vue'; setup() { const count = ref(0); const doubled = computed(() => count.value * 2); return { doubled }; }
