计算属性

模板中的表达式虽然方便，但也只能用来做简单的操作。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护。

一个基本的 demo

<script lang="ts" setup>
  import { ref, computed } from 'vue'

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

  const fullName = computed(() => `${firstName.value} ${lastName.value}`)
</script>

<template>
  <div class="person">
    姓:
    <input type="text" v-model="firstName" />
    <br />
    名:
    <input type="text" v-model="lastName" />
    <br />
    全名: {{ fullName }}
  </div>
</template>

计算属性fullName是返回值为一个ref, 是一个依赖于firstName和lastName的计算属性。它的值会随着firstName和lastName的变化而变化。

在 js 中，可以通过fullName.value来获取fullName的值。计算属性 ref 也会在模板中自动解包，因此在模板表达式中引用时无需添加 .value。

计算属性缓存 vs 方法

在表达式中像这样调用一个函数也会获得和计算属性相同的结果：

<script lang="ts" setup>
// ...省略部分代码
const funFullName =()=>`${firstName.value} ${lastName.value}`
</script>
<template>
<!-- ...省略部分代码 -->
    全名: {{ funFullName() }}
  </div>

若将同样的函数定义为一个方法而不是计算属性，两种方式在结果上确实是完全相同的，然而，不同之处在于计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。

这意味着只要 fullName 不改变，无论多少次访问 fullName 都会立即返回先前的计算结果，而不用重复执行普通函数。

可写计算属性

计算属性默认是只读的。在尝试修改一个计算属性时，会收到一个运行时警告。只在某些特殊场景中你可能才需要用到“可写”的属性，可以通过同时提供 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 会随之更新。

避免直接修改计算属性值

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

Getter 不应有副作用

不要改变其他状态、在 计算属性 中做异步请求或者更改 DOM！