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)

相关推荐
Cherry的跨界思维2 小时前
【AI测试全栈:Vue核心】22、从零到一:Vue3+ECharts构建企业级AI测试可视化仪表盘项目实战
vue.js·人工智能·echarts·vue3·ai全栈·测试全栈·ai测试全栈
前端小L8 小时前
专题三:完善响应式 —— readonly 与 isReactive
源码·vue3
神色自若9 小时前
vue3 带tabs的后台管理系统,切换tab标签后,共用界面带参数缓存界面状态
前端·vue3
扫地的小何尚19 小时前
NVIDIA RTX PC开源AI工具升级:加速LLM和扩散模型的性能革命
人工智能·python·算法·开源·nvidia·1024程序员节
前端小L1 天前
专题一:搭建测试驱动环境 (TypeScript + Vitest)
前端·javascript·typescript·源码·vue3
前端小L1 天前
专题二:核心机制 —— reactive 与 effect
javascript·源码·vue3
数据皮皮侠AI2 天前
上市公司股票名称相似度(1990-2025)
大数据·人工智能·笔记·区块链·能源·1024程序员节
开开心心就好2 天前
系统清理工具清理缓存日志,启动卸载管理
linux·运维·服务器·神经网络·cnn·pdf·1024程序员节
Cherry的跨界思维3 天前
【AI测试全栈:Vue核心】19、Vue3+ECharts实战:构建AI测试可视化仪表盘全攻略
前端·人工智能·python·echarts·vue3·ai全栈·ai测试全栈
Evan东少5 天前
[踩坑]笔记本Ubuntu20.04+NvidiaRTX5060驱动+cuda+Pytorch+ROS/Python实现人脸追踪(环境准备)
1024程序员节