vue3中的計算屬性computed

<template>
  <div>
    <h1>一個人的信息</h1>
    姓:<input v-model="person.firstName" />
    名:<input v-model="person.lastName"/>
    全名：{{ person.fullName }}
  </div>
</template>

import { reactive, computed } from "vue";
export default {
  name: "Demo",
  setup(props, context) {
    let person = reactive({
      firstName: "張",
      lastName: "三",
    });
    //計算屬性(第一種，不考慮計算屬性被修改)
    // person.fullName = computed(() => {
    //   return person.firstName + person.lastName;
    // });


    //第二種完整寫法，考慮讀和寫
    person.fullName = computed(() => {
      get: () => { 
        return person.firstName + '-' + person.lastName;
      }
      set: (val) => {
        const nameArr = val.split('-')
        person.firstName = nameArr[0]
        person.lastName = nameArr[1]
      }
    })
    return {
      person,
    };
  },
};
</script>