vue3_setup中toRefs和computed以及watch

一、toRefs

来完成数据的解构，防止它消除相应性

将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用 toRef() 创建的。

        

1..当从组合式函数中返回响应式对象时，toRefs 相当有用。使用它，消费者组件可以解构/展开返回的对象而不会失去响应性：        

let obj = reactive({
      name: "张三",
      age: 18,
    });
    let {name,age} = toRefs(obj)

    let btn = () => {
      console.log(name);
      name.value="李四"
    };

2..toRefs 在调用时只会为源对象上可以枚举的属性创建 ref。如果要为可能还不存在的属性创建 ref，请改用 toRef。

二、computed（计算属性）

写法一：

<template>
    <div class="index">
        <div>{{ msg }} ==> {{msgChange}}</div>
    </div>
</template>

<script setup>
    let msg = ref('这是ref基本类型响应式数据');
    let {name,age} = toRefs(obj)

    let msgChange= computed(()=>{
        return  msg.value.slice(0,3)
    })
</script>

写法二：

<template>
    <div class="index">
        <div>{{ msg }} ==> {{msgChange}}</div>
    </div>
</template>

<script setup>
    let msg = ref('这是ref基本类型响应式数据');
    let msgChange= computed({
        get(){
            return msg.value.slice(0,3)
        },
        set(){
            console.log('修改了');
        }
    })
    let btn = () => {
        msgChange.value='改了'
    };
</script>

三、watch (参考链接： 侦听器 | Vue.js)

vue2中：

watch：{
    obj:{
        handler(newval,oldval){
            colsole(newval,oldval)
        },
        immediate:true,
        deep:true
    }
}

vue3中：

        1.选项式语法糖

<template>
    <div class="index2">
     <input type="text" name="" id="" v-model="msg">
     <input type="text" name="" id="" v-model="obj.name">
    </div>
</template>

<script >
export default{
    setup(){
        let msg = ref('这是ref的响应式数据')
        let obj=reactive({
            name: "张三",
            age: 18
        })
        // watch(msg,(newval,oldval)=>{
        //     console.log(newval,oldval);
        // },{
        //     immediate:true
        // })
        // watch(obj,(newval,oldval)=>{
        //     console.log(newval,oldval);
        // },{
        //     immediate:true,
        //     deep:true
        // })
        //监听多个数据[一起监听],监听'对象'中某个对象
        watch([msg,()=>obj.name],(newval,oldval)=>{
            console.log(newval,oldval);
        },{
            immediate:true,
            deep:true
        })
        //立即监听函数
        watchEffect(()=>{
            console.log(msg.value);
            console.log(obj.name);
        })
        return{
            msg,
            obj
        }
    }
}
</script>

          

         2.组合式语法糖

<template>
    <div class="index2">
     <input type="text" name="" id="" v-model="msg">
     <input type="text" name="" id="" v-model="obj.name">
    </div>
</template>

<script setup>
export default{
    let msg = ref('这是ref的响应式数据')
    let obj=reactive({
         name: "张三",
         age: 18
     })
     //监听多个数据[一起监听],监听'对象'中某个对象
     watch([msg,()=>obj.name],(newval,oldval)=>{
         console.log(newval,oldval);
     },{
         immediate:true,
         deep:true
     })
}
</script>