Vue系列之计算属性缓存 和 表达式调用方法 的区别

[yuanyuanbyte]

本系列的主题是 Vue，每期讲解一个技术要点。如果你还不了解各系列内容，文末点击查看全部文章，点我跳转到文末。

如果觉得本系列不错，欢迎 Star，你的支持是我创作分享的最大动力。

计算属性缓存 和 表达式调用方法 的区别

一个计算属性的例子：

<p>{{ publishedBooksMessage }}</p>
// 在组件中
computed: {
  // 计算属性的 getter
  publishedBooksMessage() {
    // `this` 指向 vm 实例
    return this.author.books.length > 0 ? 'Yes' : 'No'
  }
}

我们可以通过在表达式中调用方法来达到 computed 同样的效果：

<p>{{ calculateBooksMessage() }}</p>
// 在组件中
methods: {
  calculateBooksMessage() {
    return this.author.books.length > 0 ? 'Yes' : 'No'
  }
}

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

所以 当我们需要进行复杂的数值计算或逻辑处理，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算。

查看全部文章

博文系列目录

• JavaScript 深入系列
• JavaScript 专题系列
• JavaScript 基础系列
• 网络系列
• 浏览器系列
• Webpack 系列
• Vue 系列
• 性能优化与网络安全系列
• HTML 应知应会系列
• CSS 应知应会系列

交流

各系列文章汇总：https://github.com/yuanyuanbyte/Blog

我是圆圆，一名深耕于前端开发的攻城狮。