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)

相关推荐
gis开发之家1 天前
《Vue3 从入门到大神50篇》Vue3 源码详解(二十):生命周期钩子源码解析 —— onMounted / onUpdated 如何实现?
前端·javascript·前端框架·vue3·vue3源码
u0103055273 天前
AI驱动的安卓UI自动生成功能实现
人工智能·1024程序员节
u0103055273 天前
长株潭智能体赋能腾讯元器链接共享
1024程序员节
云贝贝贝5 天前
OceanBase认证体系介绍与备考指南
运维·服务器·oceanbase·1024程序员节
u0103055275 天前
Java图像处理实战指南
人工智能·1024程序员节
u0103055276 天前
Java AWT鼠标事件全解析
人工智能·1024程序员节
u0103055278 天前
Java实用类应用精讲
人工智能·1024程序员节
u0103055278 天前
Java I/O核心操作实战
人工智能·1024程序员节
java1234_小锋8 天前
Vue3专题 - 响应式基础
vue·vue3·响应式
u0103055279 天前
ArrayList操作详解与实战应用
人工智能·1024程序员节