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

相关推荐
万少2 小时前
HarmonyOS 开发必会 5 种 Builder 详解
前端·harmonyos
橙序员小站4 小时前
Agent Skill 是什么?一文讲透 Agent Skill 的设计与实现
前端·后端
炫饭第一名7 小时前
速通Canvas指北🦮——基础入门篇
前端·javascript·程序员
王晓枫7 小时前
flutter接入三方库运行报错:Error running pod install
前端·flutter
符方昊7 小时前
React 19 对比 React 16 新特性解析
前端·react.js
ssshooter7 小时前
又被 Safari 差异坑了:textContent 拿到的值居然没换行?
前端
曲折7 小时前
Cesium-气象要素PNG色斑图叠加
前端·cesium
Forever7_8 小时前
Electron 淘汰!新的桌面端框架 更强大、更轻量化
前端·vue.js
不会敲代码18 小时前
前端组件化样式隔离实战:React CSS Modules、styled-components 与 Vue scoped 对比
css·vue.js·react.js
Angelial8 小时前
Vue3 嵌套路由 KeepAlive:动态缓存与反向配置方案
前端·vue.js