6. 计算属性

基础用法

模板里的表达式适合简单操作。逻辑一多就臃肿了：

<p>已出版书籍：</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'
  ]
})

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

> [!NOTE]
> 示例中的书名"Vue 4 - The Mystery"是虚构的，目前 Vue 4 并不存在。这里仅用于演示数组长度判断。

<template>
  <p>已出版书籍：</p>
  <span>{{ publishedBooksMessage }}</span>
</template>

computed() 接收一个 getter 函数，返回一个计算属性 ref。和普通 ref 一样，模板里用 publishedBooksMessage 不需要 .value。

计算属性会自动追踪依赖。author.books 变了，publishedBooksMessage 就重新计算，绑定它的地方也会更新。

计算属性 vs 方法

同一个逻辑也能用方法实现：

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

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

结果一样，但有本质区别：

计算属性基于依赖缓存。只要依赖没变，多次访问直接返回上次结果，不重新跑 getter。

方法每次重新渲染都会执行。不管依赖变没变。

看个极端的例子——这个计算属性永远不会更新，因为 Date.now() 不是响应式依赖：

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

为什么要缓存？想象一个计算属性要遍历超大数组做复杂计算。还有其他计算属性依赖它。没缓存的话，getter 的执行次数会远超必要。

可写计算属性

计算属性默认只有 getter。赋值会触发运行时警告。但也可以提供 setter 实现可写：

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

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

const fullName = computed({
  get() {
    return firstName.value + ' ' + lastName.value
  },
  set(newValue) {
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})
</script>

现在执行 fullName.value = 'Jane Smith'，setter 会同时更新 firstName 和 lastName。

获取上一次的值（3.4+）

计算属性的 getter 可以拿到上次计算的值：

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

const count = ref(2)

const alwaysSmall = computed((previous) => {
  if (count.value <= 3) {
    return count.value
  }
  // count > 3 时返回上次满足条件的值
  return previous
})
</script>

这对需要”记忆”上一次有效值的场景很有用。

最佳实践

getter 不要有副作用

计算属性只负责计算和返回值。不要在 getter 里改数据、发请求、操作 DOM。把它想象成一个纯函数——输入决定输出，没有副作用。

需要在状态变化时做副作用？用侦听器（下一章讲）。

不要修改计算属性的值

计算属性是派生状态，可以理解为”快照”。源状态变了就生成新快照。修改快照没有意义，应该去改源状态。

本节回顾

• computed() 声明基于响应式依赖的派生状态
• 计算属性有缓存，方法每次都执行
• 可以加 setter 实现可写计算属性
• getter 里不要有副作用
• 计算属性的值是只读的，不要直接修改