vue的计算属性缓存vs方法

vue的计算属性缓存vs方法

计算属性缓存 vs 方法

你可能已经注意到我们可以通过在表达式中调用方法来达到同样的效果：

Reversed message: "{{ reversedMessage() }}"

// 在组件中methods: { reversedMessage: function () { return this.message.split('').reverse().join('') }}

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是​​计算属性是基于它们的响应式依赖进行缓存的​​​。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 ​​message ​​​还没有发生改变，多次访问 ​​reversedMessage​​ 计算属性会立即返回之前的计算结果，而不必再次执行函数。

这也同样意味着下面的计算属性将不再更新，因为 ​​Date.now() ​​不是响应式依赖：

computed: { now: function () { return Date.now() }}

相比之下，每当触发重新渲染时，调用方法将​​总会​​再次执行函数。

我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。