computed 是 Vue 中处理派生数据的核心机制，用于抽离模板复杂逻辑、自动缓存响应依赖、组合多响应式数据生成新状态，且禁止执行副作用操作。
计算属性 computed 是 Vue 中处理派生数据的核心机制，它能帮你把模板里冗长、嵌套、重复的逻辑抽离到 JavaScript 层，让模板保持简洁、语义清晰，同时自动响应依赖变化——不用手动调用，也不用 watch 监听。
用 computed 替代模板中的复杂表达式
模板中直接写三元判断、数组过滤、字符串拼接等，会让 HTML 变得臃肿难读。比如：
{{ user.name ? user.name.toUpperCase() + ' (' + user.age + ')' : '未知用户' }}
换成 computed 后，模板立刻清爽：
{{ formattedUserInfo }}
对应 JS：
computed: {
formattedUserInfo() {
if (!this.user || !this.user.name) return '未知用户'
return `${this.user.name.toUpperCase()} (${this.user.age})`
}
}
避免在模板中多次调用同一逻辑
当一个派生值在多个地方使用（如 v-if、v-text、class 绑定），重复写表达式不仅啰嗦，还容易不一致。computed 自动缓存结果，只要依赖没变，就不会重新执行。
例如判断用户是否成年并用于显示和样式：
- ❌ 模板中写两次
{{ user.age >= 18 ? 'adult' : 'minor' }} - ✅ 改用
computed: { isAdult() { return this.user.age >= 18 } }，模板中统一用{{ isAdult }}或:class="{ adult: isAdult }"
组合多个响应式数据生成新状态
computed 特别适合整合 props、data、其他 computed 的结果。比如搜索列表：
- 原始列表
allItems和搜索关键词searchTerm都是响应式数据 - 定义
filteredItems()，内部用allItems.filter(...)并根据searchTerm动态过滤 - 模板只需绑定
v-for="item in filteredItems"，无需在每次渲染时手动 filter
这样既解耦了业务逻辑，又保证性能——只有 allItems 或 searchTerm 变化时才重新计算。
注意：不要在 computed 里做副作用操作
computed 应只返回值，不修改 data、不发请求、不操作 DOM。这些行为应放在 methods 或 watch 中。
- ✅ 正确：计算购物车总价
totalPrice() { return this.cartItems.reduce(...); } - ❌ 错误：在 totalPrice 里调用
this.$http.get(...)或this.count++
若需异步或副作用，请用 watch 或封装为 method 显式调用。
