【知识点】关于vue3中markRow、shallowRef、shallowReactive的了解

首先我们先了解一下这三个函数的定义以及区别

markRow

定义:

一个用于标记对象为非响应式的工具函数

shallowRef

定义:

一个用于创建浅层响应式引用的函数,只对 .value 本身进行响应式处理,不会递归地将 .value 指向的对象或数组的内部属性转换为响应式。

shallowReactive

定义:

一个用于创建浅层响应式对象的函数,只对对象的最外层属性进行响应式处理,不会递归地将内部属性转换为响应式。

作用及使用场景

markRaw:

在项目中我们经常会有使用到动态组件的时候,而在将单文件组件SFC赋值给一个变量时,如果我们使用ref或者reactive方法处理组件,通常浏览器会给出一个警告信息

复制代码
[Vue warn]: Vue received a Component that was made a reactive object. This can lead to unnecessary performance overhead and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref

原因是如果组件实例被代理为响应式对象,可能会导致不必要的更新造成的性能损耗,这个时候我们通常可以用markRaw方法代替ref

shallowRef:

在项目中我们处理一个变量时,经常会需要对整个对象做整体替换,例如一个图片轮播组件,每次切换图片,数据整体都会发生变化,那我们不需要去追踪数据内部属性的响应式变化时,我们可以使用shallowRef来代替ref做一些性能优化的处理

shallowReactive:

shallowReactive与shallowRef作用类似,一个只能处理引用类型数据,一个可以处理基础类型数据

相关推荐
睡觉z1 小时前
Haproxy搭建web群集
前端
codingandsleeping2 小时前
重读《你不知道的JavaScript》(上)- this
前端·javascript
孩子 你要相信光4 小时前
前端如何通过 Blob 下载 Excel 文件
前端·javascript
IT猫咪酱4 小时前
【前端】yarn install error
前端
喜欢打篮球的普通人4 小时前
Flang:LLVM Fortran 前端简介
前端
喵喵侠w4 小时前
腾讯地图Web版解决热力图被轮廓覆盖的问题
前端·javascript
qq_2786672865 小时前
ros中相机话题在web页面上的显示,尝试js解析sensor_msgs/Image数据
前端·javascript·ros
烛阴5 小时前
JavaScript并发控制:从Promise到队列系统
前端·javascript
zhangxingchao5 小时前
关于《黑马鸿蒙5.0零基础入门》课程的总结
前端
zhangxingchao5 小时前
Flutter的Widget世界
前端