Torefs API and toref API

1. If we use ES6 Deconstruction grammar of , Yes reactive The returned object is deconstructed to obtain the value , Then, whether it is to modify the value after deconstruction , Or modify reactive Back to state object , Data is no longer responsive ：

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

2. Is there a way for us to deconstruct properties that are responsive ？

• Vue It provides us with a toRefs Function of , Can be reactive The properties in the returned object are converted to ref;
• Then we deconstruct it again name and age In itself ref Of ;

// When we do this , Will return two ref object , They are responsive 
 let {name,age}=toRefs(info)
//1.toRefs: take reactive  All properties in the object are converted to ref, Building links 

3. This approach is equivalent to info.name and refvalue A link has been established between , Any modification will cause another change ;

toRefs and toRef The difference between

• toRefs: take reactive All properties in the object are converted to ref, Building links
• toRef: Convert one of the attributes into ref, Establishing a connection

 let {name}=info
let age=toRef(info,"age");