【知识点】关于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作用类似,一个只能处理引用类型数据,一个可以处理基础类型数据

相关推荐
We་ct10 小时前
LeetCode 5. 最长回文子串:DP + 中心扩展
前端·javascript·算法·leetcode·typescript
陈随易14 小时前
有生之年系列,Nodejs进程管理pm2 v7.0发布
前端·后端·程序员
冰暮流星14 小时前
javascript之事件代理/事件委托
前端
@yanyu66615 小时前
登录注册功能-明文
vue.js·springboot
陈随易15 小时前
AI时代,你还在坚持手搓文章吗
前端·后端·程序员
里欧跑得慢17 小时前
17. Flutter Hero动画实现:让界面过渡更加优雅
前端·css·flutter·web
IT_陈寒18 小时前
Vue的这个响应式陷阱,我debug了一整天才爬出来
前端·人工智能·后端
cn_mengbei18 小时前
用React Native开发OpenHarmony应用:Reanimated共享元素过渡
javascript·react native·react.js
kyriewen18 小时前
前端测试:别为了100%覆盖率而写测试,那是自欺欺人
前端·javascript·单元测试
去伪存真18 小时前
我自己写的第一个skills--project-core-standards
前端·agent