Vue 计算属性 computed
computed 基于已有数据计算新数据，自动缓存，比 methods 更高效 · 难度：入门 · +20XP
computed — 自动计算的值
computed 是"计算属性"——它根据其他数据自动算出一个新值。
比如购物车：总价 = 商品单价 × 数量。总价不需要单独存，它是"算出来"的。
基本用法
data() {
return { price: 99, quantity: 1 } <!-- 原始数据 -->
},
computed: {
total() {
return this.price * this.quantity <!-- 总价 = 单价 × 数量 -->
}
}在模板中使用：{{ total }}（像访问普通属性一样，不用加括号）
computed 和 methods 的区别
| computed | methods |
|---|---|
| ✅ 有缓存，依赖不变就不会重算 | ❌ 每次调用都重新计算 |
访问方式：{{ total }} | 访问方式：{{ getTotal() }} |
| 适合：基于现有数据算出新数据 | 适合：事件处理、DOM 操作 |
比如 total 依赖 price 和 quantity。只要这两个值没变，访问 100 次 total 也只会计算一次。
动手试试
- 右边是一个购物车，修改数量看总价自动变化
- 当商品总价超过 100 元，运费自动免掉
- 试试修改单价，观察所有计算属性一起更新