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)

相关推荐
Martina_03211 小时前
AI生成的3D模型打印后沿层纹开裂?用6步检查方向、壁厚与填充
图像处理·人工智能·数学建模·3d·自然语言处理·游戏策划·1024程序员节
c_hn_0072 小时前
量化数据12:国内期货L2历史数据:Tick、逐笔、五档盘口一次性打包下载
数据库·1024程序员节·#深度订单簿数据·#历史行情订单薄·#本地csv数据存储
释厄6233 小时前
同性线套娃律——圆面积必然=1+2+...+n 的求和·圆心不与 π 相关
java·人工智能·算法·1024程序员节
在所不辞兄5 小时前
【零基础学智能仿真-69】综合项目——材料参数驱动的仿真研究
人工智能·深度学习·神经网络·算法·机器学习·1024程序员节
Captain1314_李祖团7 小时前
章节3:MLIR完成一个端到端的流程
mlir·1024程序员节
Solange__8 小时前
在线3D预览器、Blender和游戏引擎怎么选?按5类任务比较格式、隐私与编辑性
人工智能·游戏·3d·游戏引擎·blender·1024程序员节·关卡设计
爱青菜8 小时前
Ribbon 七种负载均衡策略详解:原理、源码与选型实践
1024程序员节
云和数据.ChenGuang8 小时前
再论深拷贝和浅拷贝
开发语言·人工智能·python·1024程序员节
总要学点什么9 小时前
第92篇:三维特效-圆(逐渐消逝)——从圆心开始,让一个洞把整片光啃到只剩外圈
gis·webgl·cesium·空间分析·1024程序员节
普通人611 小时前
CSS-box-sizing-使用指南
开发语言·前端·css·1024程序员节