Vue3之computed计算属性

计算属性 

 computed函数

• 与Vue2.x中computed配置功能一致

• 写法

<template>
    <h1>一个人的信息</h1>
    姓：<input type="text" v-model="person.firstName">
    <br>
    名：<input type="text" v-model="person.lastName">
    <br>
    <span>全名：{{person.fullName}}</span>
    <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>