vue的计算属性缓存vs方法

最新推荐文章于 2025-05-18 17:40:48 发布

我是梅哥

最新推荐文章于 2025-05-18 17:40:48 发布

阅读量366

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/cjm13249425280/article/details/126171335

Vue 专栏收录该内容

16 篇文章

订阅专栏

计算属性提供缓存机制，仅在依赖变化时重新计算，避免重复执行复杂操作，适合性能敏感的场景。而方法每次渲染时都会执行。若不需缓存，可选择方法。对于依赖非响应式数据的方法，如`Date.now()`，计算属性不会更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

计算属性缓存 vs 方法

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

<p>Reversed message: "{{ reversedMessage() }}"</p>

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

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

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

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

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

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