1. 作用

计算属性就是当依赖的属性的值发生变化时，才会触发它的更改，否则使用的是缓存中的属性值

2. 用法

2.1 对象写法

<template>
    姓：<input type="text" v-model="firstName">
    <br>
    名：<input type="text" v-model="lastName">
    <hr>
    <div>全名：{{ name }}</div>
    <hr>
    <button @click="change">改名</button>
</template>
    
<script setup lang="ts">
import { ref,computed } from 'vue'

let firstName = ref("张")
let lastName = ref("三")

let name = computed({
    get() {
        return firstName.value + lastName.value
    },
    set(val){
        // val 就是设置给 name 的新值
        console.log(val)
        // 根据新值同步更新其依赖值
        firstName.value = val.slice(0,1)
        lastName.value = val.slice(1)
    }
})

// computed 返回的是响应式对象 ComputedRef
console.log(name)  // ComputedRef<"张三">

const change = () => {
    // 更改 name 的值，触发 setter
    name.value = "李四光"
}

</script>

2.2 函数写法（对象写法的简写）

let firstName = ref("张")
let lastName = ref("三")

// 回调只表示 getter，说明这个计算属性是只读的，不能直接修改值
let name = computed(() => {
    return firstName.value + lastName.value
})
console.log(name)  // ComputedRef<"张三">

name.value = "李四光"  // 提示信息：无法分配到 "value" ，因为它是只读属性。