2. vue3 的computed计算属性

<template>
  姓:
  <input type="text" v-model="person.firstname" />
  <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 {
  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(value) {
        const newArr = value.split("-");
        person.firstname = newArr[0];
        person.lastname = newArr[1];
      }
    });

    return { person };
  }
};
</script>

<style lang="scss" scoped>
</style>