1.Vue3.0computed属性的使用

<template>
  <div>
    <h1>一个人的信息</h1>
    姓: <input type="text" v-model="person.firstName"><br>
    名: <input type="text" v-model="person.lastName"> <br>
    <span>{{person.fullName}}</span>
  </div>
</template>

<script>
import { reactive,computed } from "vue";
export default {
  name: "Demo",
  setup() {

    let person = reactive({
      firstName:'张',
      lastName:'三'
    })
    //这里是往person属性里面追加一个fullName的值
    //好处是：如果在这里追加就不用在暴露一个对象
     person.fullName = computed(() => {
      return person.firstName + '-' + person.lastName
    })
    return {
      person,
    }
  },
};
</script>

<style>
</style>