为什么Vue不缓存方法结果

Question

Vue具有计算属性的概念。只有当其中一个依赖项发生更改时，才会重新评估它们。一个例子：

computed: {
foo() {
return this.bar + this.baz;
}
}

<div>{{ foo }}</div>

只有当this.bar或this.baz发生更改时，才会重新评估此计算属性。这是因为Vue如何利用代理对象进行更改检测。

现在看看方法：

methods: {
foo() {
return this.bar + this.baz;
}
}

<div>{{ foo() }}</div>

每次重新渲染时都会调用此方法。这对应用程序的性能非常不利。

我的问题是：为什么Vue不在模板中缓存方法调用的结果？从技术角度来看，我认为计算属性和方法之间没有区别。因此，应该可以使用与计算性质相同的反应机制。是否存在在每个渲染周期上实际重新评估方法的用例？

Answer 1

计算属性和方法结果之间的明显区别在于，方法不应该只涉及组件实例，因此不应该缓存结果。

如果一个值没有参数化，它可以提取到按需计算的基础上：

computed: {
foobaz() {
return this.bar + this.baz;
}
},
methods: {
foobazRandom() {
return this.foobaz + Math.random();
}
}

若需要缓存方法结果，则需要由开发人员显式处理，很可能是通过内存化处理。