vue3学习之计算属性computed

没有描述 只是记录自己的学习笔记

<template>
  <!-- vue3 外部的div可以不要 直接去写 -->
  <div>
    姓:
    <input type="text" v-mode="person.firstName" />
    名:
    <input type="text" v-mode="person.lastName" />
    <br />
    <span>全名:{{fullname}}</span>
  </div>
</template>
<script>
// vue3 声明基本类型用ref 引用类型用reactive
// 引入vue3的计算属性computed
import { reactive, computed } from "vue";
export default {
  // vue2的计算属性
  //   computed: {
  //     fullname() {
  //       return this.person.firstName + "-" + this.person.lastName;
  //     }
  //   },
  setup() {
    let person = reactive({
      firstName: "张",
      lastName: "三"
    });
    // 计算属性 因为是reactive声明的 可以往里面任意追加属性
    // 简写形式  没有考虑计算属性被修改的情况
    // person.fullName = computed(() => {
    //   return person.firstName + "-" + person.lastName;
    // });
    // 完整写法 考虑读和写
    person.fullName = computed({
      get() {
        return person.firstName + "-" + person.lastName;
      },
      set(value) {
        let newArr = value.split("-");
        person.firstName = newArr[0];
        person.lastName = newArr[1];
      }
    });
    return {
      person
    };
  }
};
</script>