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)

相关推荐
AORO20255 小时前
智能三防手机哪款好?22000mAh+夜视+露营灯打造专业户外装备
服务器·网络·智能手机·电脑·1024程序员节
java_logo9 小时前
SGLANG Docker容器化部署指南
linux·运维·docker·容器·eureka·1024程序员节
开利网络10 小时前
合规底线:健康产品营销的红线与避坑指南
大数据·前端·人工智能·云计算·1024程序员节
独行soc10 小时前
2025年渗透测试面试题总结-234(题目+回答)
网络·python·安全·web安全·渗透测试·1024程序员节·安全狮
全栈前端老曹12 小时前
【前端组件封装教程】第3节:Vue 3 Composition API 封装基础
前端·javascript·vue.js·vue3·组合式api·组件封装
金融小师妹12 小时前
多因子量化模型预警:美元强势因子压制金价失守4000关口,ADP数据能否重构黄金趋势?
人工智能·深度学习·1024程序员节
unable code13 小时前
攻防世界-Misc-SimpleRAR
网络安全·ctf·misc·1024程序员节
少林码僧15 小时前
2.3 Transformer 变体与扩展:BERT、GPT 与多模态模型
人工智能·gpt·ai·大模型·bert·transformer·1024程序员节
liu****17 小时前
11.Linux进程信号(三)
linux·运维·服务器·数据结构·1024程序员节
阿部多瑞 ABU18 小时前
Unicode全字符集加解密工具 - 命令行交互版:功能完整的终端解决方案
经验分享·交互·ai编程·1024程序员节