关键词：计算属性 computed 作用
作者总结
其实没有啥好说的， 就一个核心：缓存！computed 是支持缓存的， 避免了不必要的重复计算， 有较高性能表现
下面是一个表格，对比了 Vue 3 中的 computed 计算属性和普通函数方法的主要差异：
| 特性 | 计算属性 (computed) |
普通函数方法 (methods) |
|---|---|---|
| 缓存 | 是。只有当依赖数据变化时，才会重新计算。 | 否。每次调用都会执行函数逻辑。 |
| 性能 | 高。避免了不必要的计算，只在依赖变化时重新计算。 | 较低。不区分是否有数据更新，都会执行。 |
| 触发更新 | 依赖数据变化时自动更新。 | 需要手动触发或组件重新渲染时才更新。 |
| 使用场景 | 当数据变化需要进行复杂运算时，且结果要被多次引用。 | 每次都需执行新逻辑或操作不依赖响应式数据时。 |
| 访问方式 | 如访问属性一样，不需要加括号。 | 在模板中调用时需要加括号。 |
| 返回值 | 调用时返回计算后的结果，不需要执行任何函数。 | 必须执行函数以获取结果。 |
| 更新性能 | 只在依赖变化时重新求值，如果依赖未变化则返回上次的结果。 | 在每次访问或调用时无条件执行，不考虑依赖数据是否变化。 |
通过对比，我们可以看到两者在 Vue 应用中各自的优势和应用场景。computed 适合用于基于数据变化需要重新计算的场景，特别是当这些计算比较昂贵，或者计算结果会被多处使用时。而普通函数方法更适合用于执行不依赖响应式数据的操作，或者当操作每次都需要产生不同结果时。正确地选择使用计算属性还是普通方法，可以优化你的 Vue 应用的性能和可维护性。