Vue3中计算属性

1. 与Vue2.x中的computed配置功能一致
2. 写法：Vue3中也兼容Vue2中的写法，但最好不要这么写

1. 兼容Vue2的计算属性写法

<template>
    姓：<input type="text" v-model="person.firstName">
    名：<input type="text" v-model="person.lastName">
    <br/>
    全名： {{ fullName }}
</template>

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

export default {
    name: 'Demo',
    computed:{
        fullName(){
            return this.person.firstName + "-"+ this.person.lastName
        }
    },
    setup() {
        let person = reactive({
            firstName: '张',
            lastName: '三'
        })
        return {
            person
        }
    }
}
</script>

computed没有集成在setup函数中，不太符合Vue3的做法，但是仍然能够生效：

2. Vue3的计算属性写法

<template>
    姓：<input type="text" v-model="person.firstName">
    名：<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 {
    name: 'Demo',
    setup() {
        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 nameArr = value.split('-')
                person.firstName = nameArr[0]
                person.lastName = nameArr[1]
            }
        })
        return {
            person
        }
    }
}
</script>