toRefs API 与 toRef Api

1.如果我们使用ES6的解构语法,对reactive 返回的对象进行解构获取值,那么之后无论是修改解构后的值,还是修改reactive 返回的state 对象,数据都不再是响应式的:

  const info=reactive({
    name:"jiang",
    age:18
});
  let {name,age}=info

2.那有咩有办法让我们解构出来的属性是响应式的呢?

  • Vue为我们提供了一个toRefs的函数,可以将reactive返回的对象中的属性都转成ref;
  • 那么我们再次进行解构出来的name和age 本身都是ref的;
//当我们这样来做的时候,会返回两个ref对象,它们是响应式的
 let {name,age}=toRefs(info)
//1.toRefs:将reactive 对象中的所有属性都转成ref,建立链接

3.这种做法相当于info.name和refvalue之间建立了链接,任何一个修改都会引起另一个变化;

toRefs 和 toRef的区别

  • toRefs:将reactive 对象中的所有属性都转成ref,建立链接
  • toRef: 对其中一个属性进行转化成ref,建立连接
 let {name}=info
let age=toRef(info,"age");

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值