[Vue] computed 和 普通函数的区别

计算属性和普通函数

普通函数

普通的函数也能替代计算属性做的事情，普通函数每在模板里面使用一次就计算一次代码，这可能加大开销，降低性能，它不缓存。

file:[Demo.vue - template]
<div v-html="formatJson(jsonData)"></div>
<div v-html="formatJson(jsonData)"></div>
<div v-html="formatJson(jsonData)"></div>

控制台打印了三次，说明普通函数被调用三次：

计算属性

依赖的数据没有改变，计算属性就不会重新执行，而是返回它存储的缓存。所以，通过计算属性可以节省开销，即官方文档：“因此我们推荐使用计算属性来描述依赖响应式状态的复杂逻辑。”。

也就是说，如果下面是计算属性，控制台就不会打印三次 computed!。

file:[Demo.vue - template]
<div v-html="formatJson(jsonData)"></div>
<div v-html="formatJson(jsonData)"></div>
<div v-html="formatJson(jsonData)"></div>

总结

在逻辑复杂，页面上多次使用的代码，考虑使用计算属性。计算属性能够保存第一次计算的缓存，除非依赖的响应式数据发生了改变，不管调用多少次都返回上一次的缓存结果。计算属性能够减少我们的开销，提升性能。而普通的函数就完全不具备这些特点。

特性	普通函数	计算属性
缓存	不缓存，每次调用都重新计算	缓存结果，只有当依赖的响应式数据改变时才重新计算
性能	可能增加开销，降低性能	提升性能，减少不必要的计算
调用次数	每次调用都会执行函数体	只在依赖的数据发生变化时重新计算
适用场景	简单逻辑或无复杂计算的场景	复杂逻辑，且在模板中多次使用的场景