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转换成原始类型,节省内存性能;