vue3.x之toRef和toRefs

ref和reactive它们在用法上区别还是蛮大的，一个针对基本数据类型，一个针对复杂数据类型。而toRef和toRefs它们其实在用法上是很类似的，都是用来复制reactive里面的属性然后转成ref。因此既保留了响应式也保留了引用，也就是说它的复制其实是响应式ref和引用。要说区别的话那就是toRef是用来复制reactive对象上的某个属性将其转成ref，而toRefs是用来复制reactive对象上的所有属性都转成ref。

1. toRef

使用方法

🐰 toRef是用来复制reactive对象上的某个属性将其转成ref

<template>
  <div>姓名：{{ person.name }}</div>
  <div>年龄：{{ person.age }}</div>
  <div>朋友：{{ person.friend.name }}-{{ person.friend.age }}</div>
  <div v-for="(item, index) in person.hobbies" :key="index">爱好列表
    <div>{{ item }}</div>
  </div>
  <div>另外的人：{{ name }}</div>
  <button @click="updateInfo">修改信息</button>
</template>

<script lang="ts">
//👀:需要什么导入什么
import { reactive, toRef } from 'vue'
export default {
  name: 'App',
  //setup函数是组合式API的入口函数,调用在beforeCreated之前
  setup() {
    //1.定义响应式变量
    let person = reactive({
      name: '艾薇儿',
      age: 18,
      friend: {
        name: '安妮·海瑟薇',
        age: '28'
      },
      hobbies: ['music', 'dance', 'movie']
    });
    const name = toRef(person, 'name');
    console.log('person', person);
    console.log('name', name);

    //2.定义函数
    const updateInfo = () => {
      name.value = '疯驴子';
      // perso.name = '疯驴子';  // 效果相同
      console.log('person', person);
      console.log('name', name);
    }
    return { person, updateInfo, name }
  }
}
</script>

初始化效果：

从上述效果图中可以看出，使用toRef复制reactive对象中的属性值，修改这个ref对象其实也修改了reactive对象，修改reactive对象中的这个属性，也修改了这个ref值。（浅拷贝）

使用场景

❗️当我们在渲染数据时，不希望用到前缀时，可以使用组合toRef()。

2. toRefs

使用方法

🐰 toRefs是用来复制reactive对象上的所有属性都转成ref。

<template>
  <div>姓名：{{ person.name }}</div>
  <div>年龄：{{ person.age }}</div>
  <div>朋友：{{ person.friend.name }}-{{ person.friend.age }}</div>
  <div v-for="(item, index) in person.hobbies" :key="index">爱好列表
    <div>{{ item }}</div>
  </div>
  <div>另外的人：{{ refPerson.name }}</div>
  <button @click="updateInfo">修改信息</button>
</template>

<script lang="ts">
//👀:需要什么导入什么
import { reactive, toRefs } from 'vue'
export default {
  name: 'App',
  //setup函数是组合式API的入口函数,调用在beforeCreated之前
  setup() {
    //1.定义响应式变量
    let person = reactive({
      name: '艾薇儿',
      age: 18,
      friend: {
        name: '安妮·海瑟薇',
        age: '28'
      },
      hobbies: ['music', 'dance', 'movie']
    });
    const refPerson = toRefs(person);
    console.log('person', person);
    console.log('refPerson', refPerson);
    //2.定义函数
    const updateInfo = () => {
      refPerson.name.value = '疯驴子';
      console.log('person', person);
      console.log('refPerson', refPerson);
    }
    return { person, updateInfo, refPerson }
  }
}
</script>

初始化效果：

 

修改值之后的效果：

从上面的效果图可以看出，使用toRefs复制reactive对象中的属性值，修改这个ref对象中的任意属性值其实也修改了reactive对象，修改reactive对象中的任意属性，也修改了这个ref对象的属性。

使用场景

❗️ 用于转换响应式对象中所有属性为响应式数据，通常用于解构reactive定义的对象。

小结

toRef和toRefs可以理解为对象的浅拷贝，它们在某种意义上是一样的。