Vue3中的shallowReactive、shallowRef和readonly、shallowReadonly

1、shallowReactive 与 shallowRef

需要引入：

import {shallowReactive,shallowRef} from 'vue'

• shallowReactive：

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

            // let person = shallowReactive({ //只考虑第一层数据的响应式
			let person = reactive({
				name:'张三',
				age:18,
				job:{
					j1:{
						salary:20
					}
				}
			})

• shallowRef：

• 只处理基本数据类型的响应式, 不进行对象的响应式处理。

• 什么时候使用?

  • 如果有一个对象数据，结构比较深, 但变化时只是外层属性变化 ===> shallowReactive。

  • 如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换 ===> shallowRef。

2、readonly 与 shallowReadonly

• readonly: 让一个响应式数据变为只读的（深只读）。

• shallowReadonly：让一个响应式数据变为只读的（浅只读，只有第一层不能改）。

• 应用场景: 不希望数据被修改时。

    let sum = ref(0);
    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        j1: {
          salary: 20,
        },
      },
    });

    person = readonly(person);
    sum = shallowReadonly(sum);

例子： 

 参考链接：

https://www.bilibili.com/video/BV1Zy4y1K7SH?p=158&spm_id_from=pageDriver