【vue3】shallowReactive与shallowRef;readonly与shallowReadonly;toRaw与markRaw

假期第六篇,对于基础的知识点,我感觉自己还是很薄弱的。
趁着假期,再去复习一遍

1、shallowReactive与shallowRef

shallowReactive:只处理对象最外层属性的响应式(浅响应式)
shallowRef:只处理基本数据类型的响应式,不进行对象的响应式处理(浅引用)

使用:
如果有一个对象数据,结构比较深,但变化时只是外层属性发生变化====>shallowReactive
如果有一个对象数据,后续功能不会修改该对象中的属性,而是生成新的对象来替换====>shallowRef

shallowReactive 和 shallowRef 是 Vue 3 中的两个 API,用于创建“浅响应式”对象和“浅引用”数据。
1、shallowReactive:它创建了一个浅响应式对象。与 reactive 不同,shallowReactive 只会对对象的第一层属性进行响应式处理,而不会递归地对嵌套属性进行响应式转换。这意味着嵌套属性将保持为普通的 JavaScript 对象,并且在被访问或修改时不会触发更新
2、shallowRef:它创建了一个浅引用数据。与 ref 不同,shallowRef 只会对值进行浅引用处理,而不会递归地对值进行深度引用。这意味着当修改引用对象的属性时,不会触发重新渲染

shallowReactive示例:

用reactive定义的person对象,点击按钮的时候,深层次的对象,job.job1.work可以正常改变
【vue3】shallowReactive与shallowRef;readonly与shallowReadonly;toRaw与markRaw_第1张图片
用shallowReactive定义person对象,工作变了按钮其实已经点击了,但是深层次的对象,job.job1.work没有任何改变
【vue3】shallowReactive与shallowRef;readonly与shallowReadonly;toRaw与markRaw_第2张图片

shallowRef示例:

用ref定义的简单数据类型
【vue3】shallowReactive与shallowRef;readonly与shallowReadonly;toRaw与markRaw_第3张图片
用shallowRef定义的简单数据类型,效果和ref定义的简单数据类型的是一样的
【vue3】shallowReactive与shallowRef;readonly与shallowReadonly;toRaw与markRaw_第4张图片

区别在于,用shallowRef定义的对象数据类型,点击按钮不会触发数据改变,那为什么ref定义的对象就可以?因为ref的底层其实还是求助了reactive,变成一个proxy代理对象,也是响应式的。
【vue3】shallowReactive与shallowRef;readonly与shallowReadonly;toRaw与markRaw_第5张图片
打印ref和shallowRef定义的对象x,一个是proxy对象,一个是纯对象
【vue3】shallowReactive与shallowRef;readonly与shallowReadonly;toRaw与markRaw_第6张图片
【vue3】shallowReactive与shallowRef;readonly与shallowReadonly;toRaw与markRaw_第7张图片

2、readonly与shallowReadonly

readonly:让一个响应式数据变为只读的(深只读)
shallowReadonly:让一个响应式数据变为只读的(浅只读)
使用:不希望数据被修改时

readonly 和 shallowReadonly 是 Vue 3 中的两个 API,用于创建只读的响应式对象。

1、readonly:它创建了一个深度只读的响应式对象。与 reactive 不同,readonly
只能对已经存在的响应式对象进行只读包装,而不能进行响应式转换。这意味着无法对只读对象的属性进行修改或删除,并且也无法向只读对象中添加新的属性。
2、shallowReadonly:它创建了一个浅只读的响应式对象。与 readonly 不同,shallowReadonly 只会对对象的第一层属性进行只读包装,而不会递归地对嵌套对象进行只读转换。这意味着嵌套对象仍然可以被修改或删除,但是对其属性的修改将被视为非响应式的

readonly示例:
【vue3】shallowReactive与shallowRef;readonly与shallowReadonly;toRaw与markRaw_第8张图片
不允许修改,且控制台有提示,目标源是只读的。这里不是改了没有响应式回显到页面上,而是完全没有改变
【vue3】shallowReactive与shallowRef;readonly与shallowReadonly;toRaw与markRaw_第9张图片
shallowReadonly示例:
【vue3】shallowReactive与shallowRef;readonly与shallowReadonly;toRaw与markRaw_第10张图片
shallowReadonly只会对对象的第一层属性进行只读包装,而不会递归地对嵌套对象进行只读转换
【vue3】shallowReactive与shallowRef;readonly与shallowReadonly;toRaw与markRaw_第11张图片

3、toRaw与markRaw

toRaw:将一个由reactive生成的响应式对象转为普通对象
使用:用于读取响应式对象的普通对象,对这个普通对象的所有操作,不会引起页面更新
markRaw:标记一个对象,使其永远不会再成为响应式对象
使用:
1、有些值不应该设为响应式的,例如复杂的第三方类库等
2、当渲染具有不可变数据源的大列表时,跳过响应式转换可以提高性能

toRaw 和 markRaw 是 Vue 3 中用于处理响应式对象的工具函数,它们都与 Vue 3 的响应式系统紧密相关。
1、 toRaw 函数用于获取一个响应式对象的原始(非代理)版本。这是因为当我们使用 Vue 3 的响应式系统时,会自动地将对象转换为可观察(observable)的代理对象。而有时候我们需要访问一个对象的原始版本,而不是其代理的响应式版本。通过 toRaw 函数,我们可以轻松地获取一个对象的非响应式副本
2、markRaw 函数则用于标记一个对象,使其永远不会被转换为响应式对象。通过 markRaw 标记的对象不会被观察,也不会触发任何响应式依赖的更新。这在某些情况下很有用,特别是当我们有一些特殊的对象,我们希望它们保持不可变或不受响应追踪时

toRaw 示例:
【vue3】shallowReactive与shallowRef;readonly与shallowReadonly;toRaw与markRaw_第12张图片
【vue3】shallowReactive与shallowRef;readonly与shallowReadonly;toRaw与markRaw_第13张图片
markRaw 示例:
给person对象定义一个新的属性,点击添加车的时候添加新的属性car
【vue3】shallowReactive与shallowRef;readonly与shallowReadonly;toRaw与markRaw_第14张图片
页面刚加载,控制台就给出了提示,无法读取car,因为car没有定义在实例对象身上
在这里插入图片描述
因为return的时候,先把person对象通过运算符展开,代码走到这的时候,person身上并没有car,所以模板区获取不到就会提示
所以直接把person对象都返回出去
【vue3】shallowReactive与shallowRef;readonly与shallowReadonly;toRaw与markRaw_第15张图片
页面不报错了,如果在addCar方法中添加的属性不想被响应式,如果car是一个异常复杂的对象,不仅提供了name,price,还有其他属性,并且纯展示,不需要修改。如果换数据的话,会通过接口给你新的数据,不需要自己手动改,那这个时候就需要markRaw 了,虽然继续使用reactive响应式也可以,但是响应式辛辛苦苦处理出来的数据,只是拿来纯展示,效率上就有问题了

【vue3】shallowReactive与shallowRef;readonly与shallowReadonly;toRaw与markRaw_第16张图片
数据变了,但是person.car已经不再是响应式数据
【vue3】shallowReactive与shallowRef;readonly与shallowReadonly;toRaw与markRaw_第17张图片

你可能感兴趣的:(javascript,前端,开发语言)