vue3:computed

<template>   <div>     <div>       姓：<input type="text" v-model="firstName">     </div>     <div>       名：<input type="text" v-model="lastName">     </div>     <div>       全名：{{ name }}     </div>     <div>       <button @click="changeName">修改</button>     </div>   </div> </template> <script setup lang='ts'> import { ref, computed } from 'vue'; /**  * computed 支持选项式写法 和 函数式写法  * 1.选项式写法 支持一个对象传入get函数以及set函数自定义操作  * 2.函数式写法 只能支持一个getter函数不允许修改值的  */ let firstName=ref('张'); let lastName=ref('三');  // //1.选项式写法 支持一个对象传入get函数以及set函数自定义操作 // let name=computed<string>({ //   get () { //     // 读取值操作 //     return firstName.value + '-' + lastName.value //   }, //   set (newVal) { //     // 设置值操作 //     [firstName.value,lastName.value] = newVal.split('-')      //   } // }); // const changeName = () => { //   name.value = '小-田' // }    //2.函数式写法 只能支持一个getter函数不允许修改值的 let name = computed(() => firstName.value + '-' + lastName.value) </script> <style scoped> </style>