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