Vue3.0 computed计算属性案例

• 与Vue2.x中computed配置功能一致，
• 写法：
  
  App.vue代码：

<template>
  <Demo/>
</template>

<script>
import Demo from './components/Demo'
export default{
  name:'App',
  components:{Demo}
  
}
</script>

compotent - Demo.vue代码：

<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 { computed, reactive } 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>

效果：