VUE框架Vue3使用toRef和toRefs实现简化返回的对象属性操作------VUE框架

<template>
    <h1>{
    
    { counter1 }}</h1>
    <button @click="counter1++">按一下</button>
    <hr>
    <h1>{
    
    { counter2 }}</h1>
    <button @click="counter2++">按一下</button>
    <hr>
    <h1>{
    
    { a.b.counter3 }}</h1>
    <button @click="a.b.counter3++">按一下</button>
    <h1>{
    
    { data.counter1 }}</h1>
</template>

<script>
import { reactive,ref,toRef,toRefs } from 'vue'
export default {
    name : "App",
    setup(){
        let data = reactive({
            counter1 : 1,
            counter2 : 100,
            a : {
                b : {
                    counter3 : 1000
                }
            }
        });
        // 返回一个DATA就不一样了,会有响应式
        // return {data};
        // return {
        //     // 这里变成了获取数值
        //     // 没有响应式了
        //     counter1 : data.counter1,
        //     counter2 : data.counter2,
        //     counter3 : data.a.b.counter3,
        // };
        // return {
        //     data,
        //     // 这样可以实现,用ref包裹以后
        //     // 但是依旧不可以实现响应式
        //     counter1 : ref(data.counter1),
        //     counter2 : ref(data.counter2),
        //     counter3 : ref(data.a.b.counter3),
        // };
        console.log(toRef(data,"counter1"));
        // 执行toRef底层会生成一个ObjectRefImpl对象(应用对象)
        // 自带GET和SET方法的代理应用对象
        // 只要有引用对象,就有value属性,这里的value属性是响应式的,有get和set方法
        // 我们读取就调用get,修改就调用set即可
        // return {
        //     // toRef(前面是对象,后面是对象的属性名)
        //     data,
        //     counter1 : toRef(data,"counter1"),
        //     counter2 : toRef(data,"counter2"),
        //     counter3 : toRef(data.a.b,"counter3"),
        // };
        // toRefs可以解决这个问题,越写越长
        return {
            data,
            // 使用ES6语法分解即可
            ...toRefs(data)
        };
    }
}
</script>

<style>

</style>

<template>

    <h1>{ { counter1 }}</h1>

    <button @click="counter1++">按一下</button>

    <hr>

    <h1>{ { counter2 }}</h1>

    <button @click="counter2++">按一下</button>

    <hr>

    <h1>{ { a.b.counter3 }}</h1>

    <button @click="a.b.counter3++">按一下</button>

    <h1>{ { data.counter1 }}</h1>

</template>

<script>

import { reactive,ref,toRef,toRefs } from 'vue'

export default {

    name : "App",

    setup(){

        let data = reactive({

            counter1 : 1,

            counter2 : 100,

            a : {

                b : {

                    counter3 : 1000

                }

            }

        });

        // 返回一个DATA就不一样了,会有响应式

        // return {data};

        // return {

        //     // 这里变成了获取数值

        //     // 没有响应式了

        //     counter1 : data.counter1,

        //     counter2 : data.counter2,

        //     counter3 : data.a.b.counter3,

        // };

        // return {

        //     data,

        //     // 这样可以实现,用ref包裹以后

        //     // 但是依旧不可以实现响应式

        //     counter1 : ref(data.counter1),

        //     counter2 : ref(data.counter2),

        //     counter3 : ref(data.a.b.counter3),

        // };

        console.log(toRef(data,"counter1"));

        // 执行toRef底层会生成一个ObjectRefImpl对象(应用对象)

        // 自带GET和SET方法的代理应用对象

        // 只要有引用对象,就有value属性,这里的value属性是响应式的,有get和set方法

        // 我们读取就调用get,修改就调用set即可

        // return {

        //     // toRef(前面是对象,后面是对象的属性名)

        //     data,

        //     counter1 : toRef(data,"counter1"),

        //     counter2 : toRef(data,"counter2"),

        //     counter3 : toRef(data.a.b,"counter3"),

        // };

        // toRefs可以解决这个问题,越写越长

        return {

            data,

            // 使用ES6语法分解即可

            ...toRefs(data)

        };

    }

}

</script>

<style>

</style>