Vue3基础(八)___ref__toRef__toRefs

回顾

ref

在ref中可以生成一个响应式数据，改变的时候需要.value来修改属性值

<template >
  <div class="container">
    <p @click="change">{
   {
   newObj}}</p>
  </div>
</template>
<script>
import {
    ref, toRef } from "vue";
export default {
   
  setup() {
   
  //创建一个对象
    let obj = {
    name: "alice", age: 12 };
    //使用ref创建响应式对象
    let newObj = ref(obj);
    //点击方法改变newObj 
    function change() {
   
      newObj.value= "Tom";
      console.log(obj, newObj);
    }
    return {
    newObj, change };
  }
};
  }
</script>
<style  scoped>
</style>

toRef

toRef只能改变对象的一个属性，将他变成响应式的
toRef传两个参数 第一个参数是要改变的对象，第二个参数是对象的属性，变成了响应式，但是页面也不会更新，改变后原来的对象属性也会跟着改变,页面不会改变

<template >
  <div class="container">
    <p @click="change">{
   {
   newObj}}</p>
  </div>
</template>
<script>
import {
    ref, toRef } from "vue";
export default {
   
  setup() {
   
    let obj = {
    name: "alice", age: 12 };
    let newObj = toRef(obj, "name");
    function change() {
   
      newObj.value = "Tom";
      console.log(obj, newObj);
    }
    return {
    newObj, change };
  }
};
</script>
<style  scoped>
</style>

使用toRef转成的响应式数据并不能更新页面，如果想更新的多个只能连续写多个了，于是就诞生了toRefs

toRefs

使用场景: 如果对一个响应数据, 进行解构 或者 展开, 会丢失他的响应式特性!

原因: vue3 底层是对 对象 进行监听劫持

作用: 对一个响应式对象的所有内部属性, 都做响应式处理

reactive/ref的响应式功能是赋值给对象的, 如果给对象解构或者展开, 会让数据丢失响应式的能力
使用 toRefs 可以保证该对象展开的每个属性都是响应式的

可以将一个对象每个属性变成响应式

<template >
  <div class="container">
    <p @click="change">{
   {
   newObj}}</p>
  </div>
</template>
<script>
import {
    ref, toRef,toRefs } from "vue";
export default {
   
  setup() {
   
    let obj = {
    name: "alice", age: 12 };
    // let newObj = toRef(obj, "name");
    let newObj = toRefs(obj);
    function change() {
   
      // newObj.value = "Tom";
      newObj.name.value = "Tome"
      console.log(obj, newObj);
    }
    return {
    newObj, change };
  }
};
</script>
<style  scoped>
</style>

也回和toRef一样的特性改变响应数据，原始数据改变。