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

原创已于 2022-06-22 18:56:59 修改 · 338 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#学习 #javascript #前端

于 2022-06-22 18:54:44 首次发布

本文探讨了Vue.js中toRef和toRefs的使用，分别展示了如何通过toRef创建响应式属性的引用，并对比了其与reactive对象的区别。重点讲解了如何在视图更新和内存性能上进行优化，以及toRaw的作用。

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