vue3 之 computed

<template>
    姓：<input type="text" v-model="person.fistName"/>
    <br/>
    名：<input type="text" v-model="person.lastName"/>
    <br>
    全名：{{person.fullName}}
    <br>
    修改名字：<input type="text" v-model="person.fullName">
</template>

<script>
import {reactive, computed} from 'vue'
export default {
  name: 'Demo',
  setup() {
    let person = reactive({
      fistName: '张',
      lastName: '三'
    })

    //计算属性--简写（没有考虑计算属性被修改的情况）
    person.fullName = computed(() => {
        return `${person.fistName}-${person.lastName}`
    })

    //计算属性--完整写法（考虑读和写）
    // person.fullName = computed({
    //     get() {
    //         return `${person.fistName}-${person.lastName}`
    //     },
    //     set(value) {
    //         let newArr = value.split('-')
    //         person.fistName = newArr[0]
    //         person.lastName = newArr[1]
    //     }
    // })

    return {
      person
    }
  }
}
</script>