Vue 计算属性

模板内的表达式非常便利，但它们的设计初衷是用于简单运算的。在模板中放入太多的逻辑会让模板变得臃肿，难以维护。对于任何包含响应式数据的复杂逻辑，你都应该使用计算属性 (Computed Properties)。

基础示例

想象一下，我们有一个响应式对象 author，它有 name 和 books 两个属性。我们想根据 author 是否有书籍来显示不同的信息。

vue

<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 函数作为参数，其返回值是一个计算属性引用 (computed ref)。与其他 ref 类似，你可以通过 .value 访问其计算结果。

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

计算属性的缓存 vs. 方法

你可能注意到我们可以通过在表达式中调用一个方法来达到同样的效果：

vue

<!-- 在模板中调用一个方法 -->
<p>{{ calculateBooksMessage() }}</p>

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

对于最终的结果，两种方式确实是相同的。然而，不同之处在于计算属性是基于它们的响应式依赖进行缓存的。

一个计算属性只会在其相关依赖变更时才重新求值。这意味着只要 author.books 没有改变，多次访问 publishedBooksMessage 会立即返回之前的计算结果，而不会再次执行函数。

相比之下，每当触发重新渲染时，方法总是会再次执行函数。

为什么需要缓存？ 假设我们有一个性能开销比较大的计算属性 list，它需要遍历一个巨大的数组并做大量的计算。然后我们可能还有其他的计算属性依赖于 list。如果没有缓存，我们将不可避免地多次执行 list 的 getter！如果你不希望有缓存，请用方法来替代。

可写的计算属性

计算属性默认是只读的。当你尝试修改一个计算属性时，你会收到一个运行时警告。只在某些特殊场景中你可能才需要一个“可写”的计算属性，这时你可以通过同时提供 getter 和 setter 来创建：

vue

<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(' ')
  }
})

// 现在，当你运行 `fullName.value = 'Jane Smith'` 时，
// setter 会被调用，firstName 和 lastName 会被相应地更新。
</script>

最佳实践

Getter 不应有副作用：计算属性的 getter 应该只进行计算，并且没有任何其他的副作用，这一点非常重要。例如，不要在 getter 中做异步请求或者更改 DOM！
避免直接修改计算属性值：从计算属性返回的值是派生状态。可以把它看作是一个“临时快照”，每当源状态发生变化时，就会创建一个新的快照。更改快照是没有意义的，因此计算属性的返回值应该被视为只读的，并且永远不应该被更改——应该更新它所依赖的源状态以触发新的计算。

Vue 计算属性 ​

基础示例 ​

计算属性的缓存 vs. 方法 ​

可写的计算属性 ​

最佳实践 ​

Vue 计算属性

基础示例

计算属性的缓存 vs. 方法

可写的计算属性

最佳实践