computed()

computed 是 Vue 3 内置的函数，用于创建具有缓存的计算属性。它可以根据已有数据计算出新数据，与 Vue 2 中的 computed 功能一致。

• 对于方法 function：没有缓存，模板调用几次，函数就执行几次。
• 对于计算属性 computed：有缓存，模板调用多次，实际上只执行一次。

提示

计算属性（computed）返回的是一个 ref 对象，因此在赋值时需要加上 .value。这是因为 computed 属性本质上是一个响应式的 ref 对象，它的值是通过 get 方法计算出来的，赋值时需要通过 set 方法进行修改。

1. computed() 用法

只读计算属性

使用 computed 函数直接传入一个返回值的函数，用于定义只读的计算属性。这种计算属性只能读取，不能修改。

语法

import { ref, computed } from 'vue';

// 定义响应式变量 firstName 和 lastName
let firstName = ref('zhang');
let lastName = ref('san');

// 只读计算属性
let fullNameReadOnly = computed(() => {
  return firstName.value + '-' + lastName.value; // 通过拼接 firstName 和 lastName 生成 fullName
});

访问计算属性

console.log(fullNameReadOnly.value); // 输出 'zhang-san'

可读可写计算属性

使用 computed 函数传入一个对象，包含 get 和 set 方法，用于定义可读可写的计算属性。

• get 方法用于读取计算属性的值。
• set 方法用于修改计算属性的值。

语法

import { ref, computed } from 'vue';

// 定义响应式变量 firstName 和 lastName
let firstName = ref('zhang');
let lastName = ref('san');

// 可读可写计算属性
let fullName = computed({
  // 读取 fullName 的值
  get() {
    return firstName.value + '-' + lastName.value; // 通过拼接 firstName 和 lastName 生成 fullName
  },
  // 修改 fullName 的值
  set(val) {
    console.log('有人修改了fullName', val); // 输出新设置的 fullName
    const [first, last] = val.split('-'); // 将新设置的 fullName 拆分为 firstName 和 lastName
    firstName.value = first; // 更新 firstName 的值
    lastName.value = last; // 更新 lastName 的值
  }
});

访问和修改计算属性

console.log(fullName.value); // 输出 'zhang-san'

fullName.value = 'li-si'; // 修改 fullName 的值，触发 set 方法
console.log(firstName.value); // 输出 'li'
console.log(lastName.value); // 输出 'si'

提示

当我们访问计算属性时，会自动触发 get 方法，而修改计算属性时，会自动触发 set 方法

2. 示例

<template>
  <div class="person">
    姓：<input type="text" v-model="firstName"> <br>
    名：<input type="text" v-model="lastName"> <br>
    全名：<span>{{ fullName }}</span> <br>
    全名：<span>{{ fullName }}</span> <br>
    <button @click="changeFullName">全名改为：li-si</button>
  </div>
</template>

<script setup lang="ts" name="App">
import { ref, computed } from 'vue'; // 引入 computed

// 定义响应式变量 firstName 和 lastName
let firstName = ref('zhang');
let lastName = ref('san');

// 可读可写计算属性
let fullName = computed({
  // 读取 fullName 的值
  get() {
    return firstName.value + '-' + lastName.value; // 通过拼接 firstName 和 lastName 生成 fullName
  },
  // 修改 fullName 的值
  set(val) {
    console.log('有人修改了fullName', val); // 输出新设置的 fullName
    const [first, last] = val.split('-'); // 将新设置的 fullName 拆分为 firstName 和 lastName
    firstName.value = first; // 更新 firstName 的值
    lastName.value = last; // 更新 lastName 的值
  }
});

// 修改 fullName 的方法
function changeFullName() {
  fullName.value = 'li-si'; // 引起 set 中 val 的变化
}
</script>

在上述示例中：

• 定义了两个响应式变量 firstName 和 lastName。
• 定义了一个可读可写的计算属性 fullName，通过 get 方法读取 firstName 和 lastName 的拼接值，通过 set 方法更新 firstName 和 lastName 的值。
• 提供了一个修改 fullName 的方法 changeFullName，通过更新 fullName.value 来引起 set 方法的变化。

3. 总结

• computed 用于创建具有缓存的计算属性，可以根据已有数据计算出新数据。
• 计算属性返回的是一个 ref 对象，因此在赋值时需要加上 .value。
• 计算属性可以是只读的，也可以是可读可写的，通过传入函数或包含 get 和 set 方法的对象来定义。
• 访问计算属性时，自动触发 get 方法，修改计算属性时，自动触发 set 方法。