vue3中的computed属性

模板界面：

<template><div class="person"><h2>姓： <input type="text" v-model="person.firstName" /></h2><h2>名： <input type="text" v-model="person.lastName" /></h2><button @click="changeFullName">修改全名</button><h2>全名：<label>{{ fullName }}</label></h2><h2>全名：<label>{{ fullName }}</label></h2></div>
</template>

计算属性的使用：
 

<script setup name="computedName">import {reactive,toRefs,computed} from 'vue'const person = reactive({firstName:'张',lastName:'三'})const {firstName,lastName} = toRefs(person)
// 计算属性 默认是只读的 有缓存
// const fullName = computed(() =>{
//     console.log("1");
//     return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value.slice(0).toLowerCase()
// })// 计算属性 默认是只读的 有缓存
const fullName = computed({get(){console.log("1");return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value.slice(0).toLowerCase()},set(val){console.log("2");console.log('set',val);const [str1,str2] = val.split('-')firstName.value = str1lastName.value = str2}
})//该方法只是引起computed 中 set方法的调用
function changeFullName(){fullName.value = 'aaa-bbb'console.log(fullName.value);
}
</script>

样式：

<style scoped>
.person {background-color: #ccc;padding: 10px;border-radius: 10px;box-shadow: 0 0 10px;
}
</style>

注意：computed包含缓存，与方法不同，并且computed可以赋新值