computed计算属性

<template>
  <!-- vue3组件中的模板结构可以没有根标签 -->
  <h1>一个人的信息</h1>
  姓：<input type="text" v-model="person.firstName"><br>
  名：<input type="text" v-model="person.lastName"><br>
  全名：{{fullName}}

</template>

<script>
import {reactive,computed} from 'vue'

export default {
  name: 'Demo',
  setup() {

    let person = reactive({
      firstName: '张',
      lastName: '三'
    })

    //计算属性——简写
    let fullName = computed(()=>{
      return person.firstName + '-' + person.lastName
    })

    //计算属性——完整
    // let fullName = computed({
    //     get(){
    //         return person.firstName + '-' + person.lastName
    //     },
    //     set(value){
    //         const nameArr = value.split('-')
    //         person.firstName = nameArr[0]
    //         person.lastName = nameArr[1]
    //     }
    // })

    //setup的返回值,返回一个对象
    return{
      person,fullName
    }

  }
 
}
</script>

<style>

</style>