Vue 的计算属性（Computed Properties）是一种基于依赖数据动态计算值的特性，适用于处理模板中的复杂逻辑，提高代码可读性和性能。以下是关键点总结：
1. 基本用法
在 computed 选项中定义函数，函数返回派生值：
computed: {fullName() {return this.firstName + ' ' + this.lastName;}
}
模板中直接使用 {{ fullName }}，当 firstName 或 lastName 变化时自动更新。
2. 计算属性 vs 方法
- 计算属性：有缓存，依赖变化时重新计算，适合同步派生数据。
- 方法：无缓存，每次渲染都执行，适合需频繁更新或无依赖的场景。
3. Getter 和 Setter
支持通过 get/set 实现双向绑定：
computed: {fullName: {get() {return this.firstName + ' ' + this.lastName;},set(newValue) {const names = newValue.split(' ');this.firstName = names[0];this.lastName = names[1] || '';}}
}
4. 依赖响应性
- 仅当依赖项是响应式（如
data或props中的属性）时，计算属性才会更新。 - 避免依赖非响应式数据（如动态添加的属性）。
5. 注意事项
- 避免副作用：Getter 中不要修改依赖数据，防止无限循环。
- 同步计算：不支持异步操作，需改用
watch或methods。 - 缓存优势：依赖不变时直接返回缓存值，优化性能。
6. 常见场景
- 组合/格式化数据（如拼接姓名、过滤列表）。
- 减少模板复杂度，提升可维护性。
- 需要缓存的复杂计算（如大数据排序）。
7. Vue3 组合式 API
在 Vue3 中使用 computed 函数：
import { computed, ref } from 'vue';const count = ref(0);
const double = computed(() => count.value * 2);
总结：计算属性是处理响应式数据派生逻辑的高效工具，合理使用可提升应用性能及代码可读性。避免在计算属性中执行异步或副作用操作，确保依赖项的响应式。
