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");