vue框架中的computed()计算属性

computed()计算属性

在 Vue中，计算属性（computed properties）是一种特殊的响应式属性，它们基于响应式依赖进行缓存，并且只有当依赖发生变化时才会重新计算。计算属性是派生状态的声明式定义，经常用于执行复杂逻辑或执行性能密集型操作。

计算属性衍生新值

Vue框架中，使用computed()计算属性来描述依赖响应式状态的复杂逻辑，比如，计算属性允许声明性地计算衍生值（属性转换）。且其返回值具备ref响应式。

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

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

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

<template>
  <p>Has published books:</p>
  <span>{{ publishedBooksMessage }}</span>
</template>

上面的示例代码中，定义了一个计算属性 publishedBooksMessage。computed() 方法期望接收一个getter函数，返回值为一个ref计算属性。和其他一般的ref类似，可以通过 publishedBooksMessage.value 访问计算结果。计算属性也会在模板中自动解包，因此在模板表达式中引用时无需添加 value属性。

计算属性特点

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

• 计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。这意味着只要 author.books 不改变，无论多少次访问 publishedBooksMessage 都会立即返回先前的计算结果，而不用重复执行 getter 函数。这样有助于提高模板的渲染效率。

• 计算属性默认是只读的。计算属性默认只有 getter 函数，但如果需要，也可以提供一个 setter 函数。setter 函数允许在修改计算属性时执行一些逻辑：

计算属性中的getter不应有副作用

计算属性的 getter应只做计算转换，而没有任何其他的副作用。比如，不要在计算属性中改变其他状态、在 getter 中做异步请求或者更改 DOM，一个计算属性的声明中描述的仅是如何根据其他值派生一个新值。因此getter的职责应该仅为计算和返回计算结果，而不是用于修改实例中的其他属性状态。

避免直接修改计算属性值

从计算属性返回的值是派生状态。可以把它看作是一个“临时快照”，每当源状态发生变化时，就会创建一个新的快照。更改快照是没有意义的，因此计算属性的返回值应该被视为只读的，并且永远不应该被更改——应该更新它所依赖的源状态以触发新的计算。