在 Vue.js 应用中，computed 计算属性是十分常用的功能，但是在处理大量数据时，这个功能往往会带来一定的性能问题。本文将介绍如何通过缓存 computed 计算属性来优化 Vue.js 应用的性能。
为什么需要缓存 computed 计算
computed 计算属性的原理是根据响应式数据的变化，计算出新的值，从而触发模板的重新渲染。但是在大数据量的情况下，计算过程可能会变得十分复杂和耗费性能，而且在某些情况下，计算结果并不会变化，但是依然会重新计算，这样会浪费不必要的计算资源。因此，为了优化性能，我们需要缓存 computed 计算结果，避免重复计算。
如何缓存 computed 计算
Vue.js 官方文档提供了一个名为 computed 的属性，可以简单地定义一个计算属性。但是，Vue.js 中并没有原生的缓存 computed 计算的方法，我们需要手动实现。
一种实现方式是使用 JavaScript 中的闭包，将计算结果保存在一个变量中，如果变量已有值，则直接返回结果，否则重新计算并保存。
computed: {
cachedResult() {
if (!this._cachedResult) {
this._cachedResult = calculateResult()
}
return this._cachedResult
}
}另一种方式是使用 Lodash 库中的 memoize 方法，这个方法可以将一个函数的计算结果缓存起来，并在下一次调用时直接返回缓存结果。代码如下：
import memoize from 'lodash/memoize'
computed: {
cachedResult: memoize(function () {
return calculateResult()
})
}案例
下面通过一个实例来说明缓存 computed 计算的实现方式。
假设我们有一个数组，包含了一些数字，需要计算出这些数字的平均值。直接使用 computed 计算属性的实现方式如下：
computed: {
average() {
return this.numbers.reduce((a, b) => a + b, 0) / this.numbers.length
}
}在该代码中，每次执行 average 时都会重新对 numbers 数组进行计算，当数组中包含大量的数字时，计算时间将会比较长。
我们可以使用缓存 computed 计算的方法来优化这个过程。这样，只有在数组内容发生变化的情况下，才会重新计算平均值。代码如下：
-- -------------------- ---- -------
--------- -
--------------- -
-- --------------------- -- ------------------- --- ------------- -
------------------- - ------------
------------------- - ----------------------- -- -- - - -- -- - -------------------
-
------ -------------------
-
-此时，如果 numbers 数组没有发生变化，那么就只会直接返回之前的结果。
总结
在大数据量的情况下，使用缓存 computed 计算的方法可以优化 Vue.js 应用的性能。我们可以手动使用闭包或使用 Lodash 中的 memoize 方法来实现缓存 computed 计算的功能，以避免重复计算。对于经常运算的计算属性，通过缓存 computed 计算的结果，可以提升页面渲染的速度，从而改善用户的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64783910968c7c53b0479d62