详解Vue3中的计算属性computed使用方法

简单示例
例如我们有这样一个包含嵌套数组的对象

const list=reactive({
  name: '书籍',
  books: [
    '三国演义',
    '水浒传',
    '西游记',
    '红楼梦'
  ]
})

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

<div>{{ list.books.length > 0 ? 'Yes' : 'No' }}</div>

从这里看才明白它的计算依赖于 list.books。如果在代码中需要不止一次这样的计算，需要将这样的代码在上面写很多遍。
这里推荐使用计算属性来描述依赖响应式状态的复杂逻辑。这是重构后的示例：

<script setup>
import { reactive, computed } from 'vue'

const list=reactive({
  name: '书籍',
  books: [
    '三国演义',
    '水浒传',
    '西游记',
    '红楼梦'
  ]
})

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

<template>
  <span>{{ publishedBooksMessage }}</span>
</template>

Vue 的计算属性会自动追踪响应式依赖。它会检测到 publishedBooksMessage 依赖于 list.books，所以当 list.books 改变时，任何依赖于 publishedBooksMessage 的绑定都会同时更新。

扩展： 计算属性缓存 vs 方法
在实际开发中我们在表达式中像这样调用一个函数也会获得和计算属性相同的结果：

<p>{{ calculateBooksMessage() }}</p>

// 组件中
function calculateBooksMessage() {
  return list.books.length > 0 ? 'Yes' : 'No'
}

若我们将同样的函数定义为一个方法而不是计算属性，两种方式在结果上确实是完全相同的，然而，不同之处在于计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。这意味着只要 list.books 不改变，无论多少次访问 publishedBooksMessage 都会立即返回先前的计算结果，而不用重复执行 getter 函数。
相比之下，方法调用总是会在重渲染发生时再次执行函数。
为什么需要缓存呢？想象一下我们有一个非常耗性能的计算属性 list，需要循环一个巨大的数组并做许多计算逻辑，并且可能也有其他计算属性依赖于 list。没有缓存的话，我们会重复执行非常多次 list 的 getter，然而这实际上没有必要！如果你确定不需要缓存，那么也可以使用方法调用。