vue3【计算属性与监听-详】

一、计算属性--简写形式

需求：通过计算属性，计算一个人的全名。

<template>
    <h1>基本信息</h1>
    姓：<input type="text" v-model="personInfo.firstName">
    <hr>
    名：<input type="text" v-model="personInfo.lastName">
    <hr>
    <span>全名：{
  {fullName}}</span>
</template>

<script>
import { ref, reactive,computed} from 'vue'
export default {
    name: 'Demo',
    components: {  },
    setup() {
        // 数据
        let personInfo = reactive({
            firstName:'张',
            lastName:'三'
        })
        // 计算属性
        let fullName = computed(()=>{
            return personInfo.firstName+'-'+personInfo.