WHAT - 值得掌握的 computed 计算属性机制

目录

• 一、介绍
• 二、计算属性 vs 方法：缓存优势
• 三、计算属性 vs watch
• • 1. 主要区别：目的和用法
  • 2. watch 性能问题
• 四、计算属性底层实现
• 五、计算属性只读和可写
• 六、最佳实践
• • 1. 不应该有副作用
  • 2. 避免直接修改计算属性值

一、介绍

参考阅读：

• vue3 官方文档 - computed
• API - computed

根据文档，推荐使用计算属性来描述依赖响应式状态的复杂逻辑。

比如说，我们有这样一个包含嵌套数组的对象：

const author = reactive({
   
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})

我们想根据 author 是否已有一些书籍来展示不同的信息：

<p>Has published books:</p>
<span>{
  { author.books.length > 0 ? 'Yes' : 'No' }}</span>

存在的问题：

• 这里的模板看起来有些复杂，模板臃肿，难以维护
• 如果在模板中需要不止一次这样的计算，我们可不想将这样的代码在模板里重复好多遍

可以用计算属性：

// 一个计算属性 ref
const publishedBooksMessage = computed(() => {
   
  return author.books.length > 0 ? 'Yes' : 'No'
})

Vue 的计算属性会自动追踪响应式依赖。它会检测到 publishedBooksMessage 依赖于 author.books，会同时更新。

二、计算属性 vs 方法：缓存优势

若我们将同样的函数定义为一个方法而不是计算属性，两种方式在结果上确实是完全相同的，然而，不同之处在于：计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。

注意，这里的缓存关键在于其响应式依赖是否有更新，而不是值是否有变化。这也解释了为什么下面的计算属性永远不会更新，因为 Date.n