VUE框架Vue3下使用shallowRef进行系统性能优化的细节和使用场景------VUE框架

<template>
    <h1>{
    
    { data.counter }}</h1>
    <button @click="data.counter++">按一下</button>
    <button @click="change">修改计数器</button>
</template>

<script>
import {ref,shallowRef} from "vue";
export default {
    name : "App",
    setup(){
        // ref是有响应式的,而且它的value属性都做了Proxy代理
        // shallowRef有浅层的响应式,只有本对象有,向下的value就是一个普通Object了
        // let data = ref({
        //     counter : 1
        // });
        // 浅层次的响应对象
        let counter = shallowRef(1);
        // 不会对value对象做Proxy代理了
        let data = shallowRef({
            // 因此,当我们优化的时候,如果里面的数据不涉及对象的属性
            // 仅会更换对象,这个时候使用shallowRef做优化最好,因为它针对对象进行浅层次的响应式处理
            // 这里的value变成了一个普通的Object对象
            // 没有响应式了
            counter : 1
        });
        // 一般用于系统性能优化
        function change(){
            data.value = {counter:1000}
        }
        console.log(data);
        return {data,change};
    }
}
</script>

<style>

</style>

<template>

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

    <button @click="data.counter++">按一下</button>

    <button @click="change">修改计数器</button>

</template>

<script>

import {ref,shallowRef} from "vue";

export default {

    name : "App",

    setup(){

        // ref是有响应式的,而且它的value属性都做了Proxy代理

        // shallowRef有浅层的响应式,只有本对象有,向下的value就是一个普通Object了

        // let data = ref({

        //     counter : 1

        // });

        // 浅层次的响应对象

        let counter = shallowRef(1);

        // 不会对value对象做Proxy代理了

        let data = shallowRef({

            // 因此,当我们优化的时候,如果里面的数据不涉及对象的属性

            // 仅会更换对象,这个时候使用shallowRef做优化最好,因为它针对对象进行浅层次的响应式处理

            // 这里的value变成了一个普通的Object对象

            // 没有响应式了

            counter : 1

        });

        // 一般用于系统性能优化

        function change(){

            data.value = {counter:1000}

        }

        console.log(data);

        return {data,change};

    }

}

</script>

<style>

</style>

import {reactive} from "vue";
export default function(){
    let data = reactive({
        num1 : 0,
        num2 : 0,
        result : 0
    });
    function sum(){
        // num3.value = num1.value + num2.value;
        data.result = data.num1 + data.num2;
    }
    // return {num1,num2,result,submit}
    return {data,sum}
}

import {reactive} from "vue";

export default function(){

    let data = reactive({

        num1 : 0,

        num2 : 0,

        result : 0

    });

    function sum(){

        // num3.value = num1.value + num2.value;

        data.result = data.num1 + data.num2;

    }

    // return {num1,num2,result,submit}

    return {data,sum}

}