vue3的shallowReactive和shallowRef,readonly和shallowReadonly

news2024/11/25 1:05:03

shallowReactive：只处理对象最外层属性的响应式（浅响应式）

<template>
    <span>姓名：{{name}}</span>
    <span>年龄：{{age}}</span>
    <span>职业：{{salary.job.num}}</span>
    <button @click="name += '~'">{{name}}</button>
    <button @click="age ++">{{age}}</button>
    <button @click="salary.job.num += 'ba'">{{salary.job.num}}</button><br />
</template>

<script>
import { reactive ,toRefs,shallowReactive} from 'vue';
export default {
    name: 'toRef',
    setup() {
        // let person = reactive({ // 此时person里面的对象比如salary.job.num都具有响应式
            let shallowPerson = shallowReactive({ // 此时就只有最外层（最浅的那层具有响应式所以叫shallow）此时的num属性不具有响应式了
            name:"james",
            age:38,
            salary:{
                job:{
                    num:'ba'
                },
            }
        });
        console.log(shallowPerson)
        const p = toRefs(shallowPerson);// 使用toRefs同样不能使深层次的达到响应的效果
        return {
            shallowPerson,
            ...p, 
        };
    }
}
</script>

shallowRef：只处理基本数据类型的响应式，不进行对象的响应式处理

<template>
    <button @click="num++">{{num}}</button>
    <button @click="num2++">{{num2}}</button>
    <button @click="obj1.num++">{{obj1.num}}</button>
    <button @click="obj2.num++">{{obj2.num}}</button> // 此时加的话页面上的数据就不会有变化了
</template>
  
<script>
import { reactive ,toRefs,shallowReactive,shallowRef,ref} from 'vue';
export default {
    name: 'toRef',
    setup() {

        let person = reactive({ // 此时person里面的对象比如salary.job.num都具有响应式
            name:"james",
            age:38,
            salary:{
                job:{
                    num:'ba'
                },
            }
        });

        let num = ref(0); 
        let num2 = shallowRef(0);//此时这两者并没有很大的区别

        let obj1 = ref({num:0});let obj2 = shallowRef({num:0});
        // 此时两者就有区别了，ref定义的数据还是具有响应式的因为ref会借助reactive来给引用类型的数据增加响应式的
        // 但是shallowRef就不会了，此时obj2.num就不具备响应式了
        console.log(obj1,obj2);

        return {
            num,
            num2,
            obj1,
            obj2
        };
    }
}
</script>

在这里插入图片描述
ref通过reactive让其对象使用Proxy来产生数据的响应式

使用情况

一个对象，结构较深，但变化的只是最外层属性变化就用shallowReactive
一个对象，后续功能不会修改该对象中的属性，而会被最新的对象进行替换就用shallowRef

readonly和shallowReadonly ，一切尽在代码中

<template>
    <button @click="noChange.age++">{{  noChange.age  }}</button>
    <button @click="shallowChange.age++">{{  shallowChange.age  }}</button> <!-- 不可修改的 -->
    <button @click="shallowChange.salary.job.num++">{{  shallowChange.salary.job.num  }}</button>  <!-- 可修改的 -->
</template>
  
<script>
import { reactive, toRefs, shallowReactive, shallowRef, ref,readonly, shallowReadonly } from 'vue';
export default {
    name: 'toRef',
    setup() {

        let person = reactive({ // 此时person里面的对象比如salary.job.num都具有响应式
            name: "james",
            age: 38,
            salary: {
                job: {
                    num: 11
                },
            }
        });

        let num = ref(0);
        num = readonly(num);// readonly也适用于ref shallowReadonly也是适用的 但是没必要这样使用，shallowReadonly一般适用于有层次的对象

        let noChange = readonly(person);// 此时noChange和person里面的数据一样的 但是不能进行修改的,修改的话控制台会报警告的
        let shallowChange = shallowReadonly(person);// 因为带了shallow顾名思义，这个就是对象的最外层变成只可读的，但是深层次的是可以修改的
        return {
            noChange,
            shallowChange
        };
    }
}
</script>