3.8. 【computed】

作用：根據已有數據計算出新數據（和Vue2中的computed作用一致）。

<template><div class="person">姓：<input type="text" v-model="firstName"> <br>名：<input type="text" v-model="lastName"> <br>全名：<span>{{fullName}}</span> <br><button @click="changeFullName">全名改為：li-si</button></div>
</template><script setup lang="ts" name="App">import {ref,computed} from 'vue'let firstName = ref('zhang')let lastName = ref('san')// 計算屬性——只讀取，不修改/* let fullName = computed(()=>{return firstName.value + '-' + lastName.value}) *///計算屬性有緩存，方法沒有緩存// 計算屬性——既讀取又修改let fullName = computed({// 讀取get(){return firstName.value + '-' + lastName.value},// 修改set(val){console.log('有人修改了fullName',val)firstName.value = val.split('-')[0]lastName.value = val.split('-')[1]}})function changeFullName(){fullName.value = 'li-si'} 
</script>