学习Vue3 第八章（认识to系列全家桶）

toRef:把对象中的某一个属性变成响应式属性；

toRef
1-对原始对象和引用对象造成影响，但视图不显示变化。

const obj2={
  foo:"XX",
  bar:"YY"
}
const message_foo=toRef(obj2,'foo');
const changefoo=()=>{
  message_foo.value="happyfoo";
  console.log("原始对象",obj2);
  console.log("最终对象",message_foo);
}

2-将原始对象修改为reactive对象，视图显示变化。

const obj2=reactive({
  foo:"XX",
  bar:"YY"
})
const message_foo=toRef(obj2,'foo');
const changefoo=()=>{
  message_foo.value="happyfoo";
  console.log("原始对象",obj2);
  console.log("最终对象",message_foo);
}

toRefs:

let obj2=reactive({
  foo:1,
  bar:1
})
let {foo,bar}=toRefs(obj2);
console.log(foo,bar);
const changefoo=()=>{
 foo.value++;
 bar.value++;
}

<!-- <div>{{ message_foo }}</div> -->
<div>{{ foo }}</div> 
<div>{{ bar }}</div> 
<n-button @click="changefoo">修改foo</n-button>

toRaw:将Ref转换成原始类型，节省内存性能；