vue3的计算属性computed

老例子了，计算姓名：

改姓和名 能响应全名  改全名无法响应姓或名 单向：

完整的写法：

这样就是双向响应：

完整代码：

<template>
    姓：<input type="text" v-model="person.xing"> <br> <br>
    名：<input type="text" v-model="person.ming"> <br> <br>
    计算：<input type="text" v-model="person.fullname">
</template>

<script>
// 用到computed 先引入
import {reactive,computed} from 'vue';
export default {
  setup() {
    let person = reactive({
        xing:'张',
        ming:'三',
    })
   
    // 完整写法 对象形式 双向响应
    person.fullname = computed({
        // 读取fullname调用get方法
        get(){
            return person.xing + '-' + person.ming
        },
        // 修改fullname调用set方法 value是修改的值
        set(value){
            console.log("fullname被修改-------",value);
            const nameArr = value.split('-')  //拿到修改的值 张-三 拆分得到数组 姓和名
            person.xing = nameArr[0]  //把拿到的姓赋值
            person.ming = nameArr[1]  //把拿到的名赋值
        }
    })

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

看使用场景了，有时候不需要双向，就用简写形式就可。