computed
computed() 函数用于根据一个或多个响应式数据源计算得到一个新的响应式数据，并具有缓存功能。
计算属性应该是只读的，虽然它也可以修改，但是不建议。
只读计算属性
computed() 接受一个 getter 函数，并返回一个只读的响应式 ref 对象，通过 .value 属性暴露 getter 函数的结果。
1<template>
2 <div>
3 姓：<input type="text" v-model="familyName" /> <br />
4 名：<input type="text" v-model="firstName" /> <br />
5 全名：<span>{{ fullName }}</span>
6 </div>
7</template>
8
9<script lang="ts" setup>
10import { computed, ref } from 'vue';
11
12const familyName = ref('');
13const firstName = ref('');
14
15// 创建一个只读的计算属性
16const fullName = computed(() => {
17 return `${familyName.value} - ${firstName.value}`;
18});
19</script>
可读可写计算属性
虽然 computed() 可以创建可写的计算属性，但通常不推荐这样做，因为它可能会导致数据流难以跟踪和维护。如果确实需要可写的计算属性，可以通过提供一个包含 get 和 set 函数的对象来实现。
1<template>
2 <div>
3 姓：<input type="text" v-model="familyName" /> <br />
4 名：<input type="text" v-model="firstName" /> <br />
5 全名：<span>{{ fullName }}</span> <br />
6 <button @click="update">修改</button>
7 </div>
8</template>
9
10<script lang="ts" setup>
11import { computed, ref } from 'vue';
12
13const familyName = ref('');
14const firstName = ref('');
15
16// 创建一个可读可写的计算属性
17const fullName = computed({
18 get: () => {
19 return `${familyName.value} - ${firstName.value}`;
20 },
21 set: (val) => {
22 const parts = val.split('-');
23 familyName.value = parts[0];
24 firstName.value = parts[1];
25 }
26});
27
28function update() {
29 fullName.value = 'su-xingxing';
30}
31</script>
