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

相关推荐
尾善爱看海6 小时前
Vue 面试收官篇:SSR、性能优化落地、30 道高频面试题精讲(附标准答案)
前端·javascript·vue.js·面试·vue
weixin_BYSJ19876 小时前
【计算机毕设】基于SpringBoot与Vue的文物保护档案管理系统08621
vue.js·spring boot·spring cloud·微服务·架构·django·课程设计
Bs_MoneyMagnet7 小时前
基于springboot+vue的个人健康管理系统的设计与实现 源码+文档
java·vue.js·spring boot·后端·vue3·springboot3·计算机毕业设计
驳是7 小时前
一个组件,提升 react-router 开发的幸福感
前端·preact
GreenTea7 小时前
OpenAI Agents API 上手实测:一次调用把整个 agent loop 甩给 OpenAI
前端·后端·算法
星云API技术支持7 小时前
企业微信二次开发:群权限设置、成员管理与群资料维护的接口组合实践
java·前端·企业微信
京东云开发者8 小时前
81.8 秒的视频,我们改了 15 个版本:一次纯 Codex 驱动的 AI-native 视频实践
前端·aigc
Csvn8 小时前
TypeScript 大型项目架构:从单体 tsconfig 到分层可扩展的工程
前端
Bs_MoneyMagnet10 小时前
基于springboot+vue的心理咨询预约与随访平台的设计与实现 源码+文档
vue.js·spring boot·后端·spring·毕业设计·旅游·计算机毕业设计
计算机魔术师10 小时前
Dario Amodei 发文呼吁为前沿 AI 降速并提出三点计划
前端