计算属性的缓存特性

计算属性的核心优势是缓存机制。

缓存示例

computed: {
  expensiveCalc() {
    console.log('执行计算')
    return this.items.reduce((sum, item) => sum + item.price, 0)
  }
}

多次访问 this.expensiveCalc 只会打印一次日志。

缓存 vs 无缓存

// 方法：每次调用都执行
methods: {
  total() {
    return this.items.reduce((sum, i) => sum + i.price, 0)
  }
}

// 计算属性：有缓存
computed: {
  total() {
    return this.items.reduce((sum, i) => sum + i.price, 0)
  }
}

模板中多次使用 {{ total }}，方法会执行多次，计算属性仅计算一次。

不缓存的场景

如果不需要缓存，用方法：

// 每次都要获取当前时间
methods: {
  now() {
    return Date.now()
  }
}

计算属性的缓存基于 Vue 的响应式依赖追踪。

何时使用方法

要点总结

• 计算属性自动缓存，依赖不变则返回缓存值
• 适合开销较大的计算操作
• 不支持传参，依赖隐式追踪
• 不需要缓存或需要参数时用方法