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)

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值