vue3+ts的computed属性怎么用？

首先我们要进行引入computed这个属性，然后定义用这个属性的时候我们要先了解这个属性。

这个computed其实分为里两种！一种是仅可读的，还有一种就是即可以读，又可以修改的！

那我们常用的肯定是后者！我们引入方法后，里面直接包一个对象里面装着get()set()两种方法！学习java后端的应该都不陌生！哈哈哈哈哈，然后get就是拿到这个计算的值，直接return回来即可，而set就是要对计算的值进行修改！点击之后，就可以修改这个全名了！

<template><div class="person"><div>姓:<input type="text" v-model="firstName" /></div><div>名:<input type="text" v-model="lastName" /></div><div>全名:<span>{{ fullName }}</span></div><button @click="changeFullName">将全名改为li-si</button></div>
</template><script lang="ts" setup name="Person">
import { ref, computed } from "vue";
let firstName = ref("zhang");
let lastName = ref("san");
let fullName = computed({get() {return (firstName.value.slice(0, 1).toUpperCase() +firstName.value.slice(1) +"-" +lastName.value);},set(val) {console.log(val);const [str1, str2] = val.split("-");firstName.value = str1;lastName.value = str2;},
});
function changeFullName() {fullName.value = "li-si";
}
</script><style scoped>
.person {background-color: #ddd;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;
}
</style>