get作用：當有人都去fullName時，get就會被呼叫，且返回的值作為fullName
get呼叫時機：
1.初次讀取fullName時，
2.所依賴的資料會發生變化
set呼叫時機：
當fullName被修改時

<template>
    <div>
        <h1>一個人的資訊</h1>
        姓：<input type="text" v-model="firstName" />
        <br>
        名：<input type="text" v-model="lastName" />
        <br>
        全名：<span>{{fullName}}</span>
        <br>
        修改：<input type="text" v-model="fullName" />
    </div>
</template>

<script>
import {ref,computed} from 'vue'

export default {
    
    setup(){
        let firstName=ref('')
        let lastName=ref('')
        // let fullName=computed(()=>{
        //     return firstName.value+'-'+lastName.value
        // })
        let fullName=computed({
            get(){
                return firstName.value+'-'+lastName.value
            },
            set(value){
                let nameArr=value.split('-')
                firstName.value=nameArr[0]
                lastName.value=nameArr[1]
            }
        })
        return {
            firstName,
            lastName,
            fullName
        }
    }
}
</script>

 只讀不改可以簡寫

<script setup>
import {ref,computed} from 'vue'
    let firstName=ref('')
    let lastName=ref('')
    let fullName=computed(()=>{
        return firstName+'-'+lastName
    })
</script>