vue3中常见的组合式API

一、toRef 和 toRefs

应用:要将响应式对象中的某个属性单独提供给外部使用时。

语法:

toRef语法:const name = toRef(person, 'name')

toRefs语法:toRefs(person),如果在return中直接写,需要用...(展开运算符)

二、shallowRef 与 shallowReactive(shallow浅层次的)

shallowRef:只处理基本数据类型的响应式,不进行对象的响应式处理。

shallowReactive:只处理对象最外层属性的响应式(浅响应式)。

应用:

如果有一个对象数据,后续功能不会修改该对象中的属性,而是生成新的对象来替换,用shallowRef。

如果有一个对象数据,结构较深,变化时只有外层属性变化,用shallowReactive。

三、readonly 与 shallowReadonly(shallow浅层次的)

readonly:让一个响应式数据变为深层次只读(所有属性都不能被修改)。

shallowReadonly:让一个响应式数据变为浅只读(只有最外层属性不能被修改)。

应用:当一个对象定义在hook中,或者可复用的组件中,如果其中一个父组件不允许修改这个对象,就可以使用。

用法:person = readonly(person) person = shallowReadonly(person)

四、toRaw 与 markRow

toRaw:

作用:将一个由 reactive 生成的响应式对象转为普通对象。

应用:读取响应式对象对应的普通对象,对这个普通对象的所有操作,不会引起页面更新。

语法:const p = toRaw(person)

markRaw:

作用:标记一个对象属性,使其永远不会再成为响应式。

应用:

(1)有些值不应被设置为响应式的,例如复杂的第三方类库等。

(2)当渲染具有不可变数据源的大列表时,跳过响应式转换可以提高性能。

语法:person.car = markRow(car)

相关推荐
希忘auto4 小时前
详解Redis的常用命令
redis·1024程序员节
yaosheng_VALVE19 小时前
探究全金属硬密封蝶阀的奥秘-耀圣控制
运维·eclipse·自动化·pyqt·1024程序员节
dami_king19 小时前
SSH特性|组成|SSH是什么?
运维·ssh·1024程序员节
一个通信老学姐6 天前
专业125+总分400+南京理工大学818考研经验南理工电子信息与通信工程,真题,大纲,参考书。
考研·信息与通信·信号处理·1024程序员节
&活在当下&6 天前
element plus的table组件,点击table的数据是,会出现一个黑色边框
vue3·element plus
sheng12345678rui6 天前
mfc140.dll文件缺失的修复方法分享,全面分析mfc140.dll的几种解决方法
游戏·电脑·dll文件·dll修复工具·1024程序员节
&活在当下&6 天前
Element plus 下拉框组件选中一个选项后显示的是 value 而不是 label
前端·javascript·vue3·element plus
瑶琴AI前端6 天前
从0到1实现vue3+vite++elementuiPlus+ts的后台管理系统(一)
前端·typescript·vue3
huipeng9267 天前
第十章 类和对象(二)
java·开发语言·学习·1024程序员节
earthzhang20217 天前
《深入浅出HTTPS》读书笔记(19):密钥
开发语言·网络协议·算法·https·1024程序员节