computed
在 Vue 3 中，计算属性（computed）是一种用于根据其他响应式数据派生衍生值的特性。它提供了一种方便的方式来定义响应式的衍生属性，以供模板和其他计算属性使用。
使用 computed，你可以定义一个函数，在函数中根据其他响应式数据进行计算，并返回一个计算结果。
使用语法如下：
javascript
插入代码复制代码
import { computed } from 'vue';
// 在组件中定义计算属性
const myComputed = computed(() => {
// 根据其他响应式数据进行计算
return 2 + 3;
});
在上述示例中，computed 函数接收一个回调函数作为参数。回调函数中的代码会根据需要计算的逻辑来编写。Vue 3 会自动追踪在回调函数中使用的响应式数据，并在响应式数据发生变化时重新计算。
你可以在模板中使用计算属性 myComputed 来获取计算结果，就像访问普通的响应式属性一样：
html
插入代码复制代码
<template>
<div>
计算结果: {{ myComputed }}
</div>
</template>
在模板中使用计算属性时，Vue 3 会自动追踪计算属性的依赖关系，并在依赖的响应式数据发生变化时重新计算和更新计算结果。
除了基本的计算属性，Vue 3 的计算属性还可以具有 setter 方法，允许你通过计算属性来进行双向数据绑定。
setter
在 Vue 3 中，setter 是计算属性（computed）的一个特性。它使你可以通过计算属性来实现双向绑定，即在计算属性中不仅可以获取数据，还可以修改数据。
通常，计算属性是只读的，只能获取其依赖数据的值。但使用 setter，你可以为计算属性定义一个可写入的方法，当修改计算属性的值时，会触发 setter 方法，从而修改依赖数据。
下面是一个使用 setter 的示例：
javascript
插入代码复制代码
import { reactive, computed } from 'vue';
const user = reactive({
firstName: 'John',
lastName: 'Doe',
fullName: computed({
get: () => {
return `${user.firstName} ${user.lastName}`;
},
set: (value) => {
const [firstName, lastName] = value.split(' ');
user.firstName = firstName;
user.lastName = lastName;
}
})
});
在上述示例中，我们使用 reactive 函数创建了一个响应式对象 user，该对象包含 firstName、lastName 和 fullName 三个属性。fullName 是一个计算属性，通过 computed 创建。它的 get 方法返回 firstName 和 lastName 的拼接结果。而 set 方法根据传入的值拆分并设置 firstName 和 lastName。
我们可以使用这个计算属性 fullName 并使用它的 setter 方法来修改 firstName 和 lastName 的值：
javascript
插入代码复制代码
user.fullName = 'Alice Smith';
console.log(user.firstName); // 输出: Alice
console.log(user.lastName); // 输出: Smith
通过这种方式，我们可以在计算属性中实现修改依赖数据的功能，实现双向绑定的效果。
使用 setter 的计算属性在 Vue 3 中提供了更大的灵活性，使我们能够根据需要更新和修改数据。
