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

相关推荐
CaseyWei17 分钟前
JS实现直接下载PDF文件
前端·javascript
球球和皮皮22 分钟前
Babylon.js学习之路《七、用户交互:鼠标点击、拖拽与射线检测》
javascript·3d·前端框架·babylon.js
pianmian129 分钟前
3dczml时间动态图型场景
前端·javascript·数据库
编程大全42 分钟前
45道工程模块化高频题整理(附答案背诵版)
前端·工程化
好奇的菜鸟1 小时前
如何升级 npm:从版本管理到最佳实践
前端·npm·node.js
iamtsfw1 小时前
从头实现react native expo本地生成APK
javascript·react native·react.js
伊成1 小时前
扫盲笔记之NPM
前端·笔记·npm
coding随想1 小时前
JavaScript的三大核心组成:ECMAScript、DOM与BOM
开发语言·javascript·ecmascript
飞飞9871 小时前
spring mvc
java·服务器·前端
sql123456789111 小时前
Vue-js
前端·javascript·vue.js