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

相关推荐
锋行天下18 分钟前
如何用Vite实现Vue组件的按需打包和远程加载
前端·vue.js·前端框架
光影少年35 分钟前
原生DOM操作在React 中的注意事项
前端·javascript·react.js
用户9004633704036 分钟前
用Gemini搞定Vue报错和语法异常的问题
vue.js
糖拌西瓜皮1 小时前
Node.js核心模块实战:文件、路径、HTTP与流处理
javascript·node.js
糖拌西瓜皮1 小时前
NestJS入门指南:Java开发者的Spring Boot体验
javascript·node.js
糖拌西瓜皮1 小时前
Express框架快速上手:中间件、路由与错误处理
javascript·node.js
禅思院3 小时前
前端部署“三层漏斗”完全指南:从CI/CD到自动回滚的工程化实战【开题】
前端·架构·前端框架
快乐肚皮3 小时前
深入理解Loop Engineering
前端·后端
半个落月3 小时前
从递归到快速排序:用 JavaScript 把分治思想讲明白
javascript·算法·面试
风骏时光牛马4 小时前
VHDL十大经典基础功能设计实例代码合集
前端