6. 计算属性

6.1 示例

如果在模板中写太多逻辑，会让模板变得臃肿，难以维护。

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

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

如果在模板中需要不止一次这样的计算，可不想将这样的代码在模板里重复好多遍。

可以使用计算属性来描述依赖响应式状态的复杂逻辑

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

6.2 计算属性缓存 vs 方法

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

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

调用一个函数也会获得和计算属性相同的结果，和计算属性不同之处在于：

• 计算属性值会基于其响应式依赖被缓存
• 一个计算属性仅会在其响应式依赖更新时才重新计算

要 author.books 不改变，无论多少次访问 publishedBooksMessage 都会立即返回先前的计算结果，而不用重复执行 getter 函数。

const now = computed(() => Date.now())

计算属性now，永远不会更新， 因为 Date.now() 并不是一个响应式依赖；

如使用方法调用，总是会在重渲染发生时再次执行函数

6.3 可写计算属性

计算属性默认是只读的。当尝试修改一个计算属性时，会收到一个运行时警告。

通过同时提供 getter 和 setter 来创建可写计算属性

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

const firstName = ref('John')
const lastName = ref('Doe')

const fullName = computed({
  // getter
  get() {
    return firstName.value + ' ' + lastName.value
  },
  // setter
  set(newValue) {
    // 注意：我们这里使用的是解构赋值语法
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})
</script>

运行 fullName.value = 'John Doe' 时，setter 会被调用而 firstName 和 lastName 会随之更新。

6.3 最佳实践

6.3.1 Getter 不应有副作用

计算属性的 getter 应只做计算而没有任何其他的副作用

6.3.2 避免直接修改计算属性值

从计算属性返回的值是派生状态.

可以把它看作是一个“临时快照”，每当源状态发生变化时，就会创建一个新的快照。更改快照是没有意义的.

计算属性的返回值应该被视为只读的，并且永远不应该被更改——应该更新它所依赖的源状态以触发新的计算。