计算属性computed

定义

计算属性是根据依赖数据来一系列计算得出的一个属性，

例如定义了一个数据

a=1

计算属性根据a来计算另一个结果,那么b就是这个计算属性得出的结果

b = a+1

vue3用法

用法一
const menuDrawer = computed({
  get: () => 1+1,
  set: (val) => {
      // 改变方法
    useAppStore().toggleSideBar(val)
  }
})

用法二
const theme = computed(() => settingsStore.theme)

计算属性缓存 vs 方法

你可能注意到我们在表达式中像这样调用一个函数也会获得和计算属性相同的结果：

template

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

js

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

若我们将同样的函数定义为一个方法而不是计算属性，两种方式在结果上确实是完全相同的，然而，不同之处在于计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。这意味着只要 author.books 不改变，无论多少次访问 publishedBooksMessage 都会立即返回先前的计算结果，而不用重复执行 getter 函数。

这也解释了为什么下面的计算属性永远不会更新，因为 Date.now() 并不是一个响应式依赖：

js

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

相比之下，方法调用总是会在重渲染发生时再次执行函数。

为什么需要缓存呢？想象一下我们有一个非常耗性能的计算属性 list，需要循环一个巨大的数组并做许多计算逻辑，并且可能也有其他计算属性依赖于 list。没有缓存的话，我们会重复执行非常多次 list 的 getter，然而这实际上没有必要！如果你确定不需要缓存，那么也可以使用方法调用。