【vue练习 -06】vue3计算属性computed

使用：vue3老套路，使用前需要手动引入import {computed} from 'vue'

简写形式：直接给computed传一个回调函数，然后函数返回值就是你计算好的值

完整写法：直接给computed传一个对象，配置get与set

大致套路跟vue2一样的

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

<script>
import {reactive,computed} from 'vue'
export default {
  name: "",
  emits: ["changeValue"],
  setup() {
    let person = reactive(
        {firstName:'张',lastName:'三'}
    )
    // 直接往对象里面追加一个属性
    // 计算属性接收一个回调函数参数

    // 简单写法，不考虑计算属性会被修改的情况下使用
    person.fullName = computed(()=>{
        // 计算完后要把计算值返回
        return person.firstName+'-'+person.lastName
    })

    // 完整写法传一个对象
        person.fullName = computed({
            // 读取时调用
            get(){
                return  person.firstName+'-'+person.lastName
            },
            // 修改时调用，value是修改后的值
            set(value){
                let arr = value.split('-')//以'-'为准拆分字符串为数组
                person.firstName = arr[0]
                person.lastName = arr[1]
            }
        })

    return {
        person
    };
  },
};
</script>

<style lang="" scoped>
</style>