toRef和toRefs的区别

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、toRef / toRefs？

toRef和toRefs可以用来复制reactive里面的属性然后转换为ref，而且它既保留了响应式，也保留了引用，也就是说，从reactive里边复制过来的属性进行修改之后，除了视图会进行更新，原有的reactive里边的对应的值也会随之进行更新，可以比拟成浅拷贝，复制其实就是引用+响应式ref

二、不加s和加上s的区别：

• toRef：复制reactive里的单个属性并且转为ref
• toRefs：复制reactive里的所有属性并转为ref

三、 使用案例

<template>
  <h3>姓名：{{ name }}</h3>
  <h3>年龄：{{ age }}</h3>
  <h3>薪资：{{ job.j1.salary }}</h3>
  <button @click="name += '!'">修改姓名</button>
  <button @click="age++">增长年龄</button>
  <button @click="job.j1.salary++">涨薪</button>
</template>
  
<script>
import { reactive, toRefs } from "vue";
export default {
  setup() {
    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        j1: {
          salary: 20,
        },
      },
    });
    return {
      // 使用toRef：toRef 一次仅能设置一个数据，接收两个参数，第一个参数是哪个对象，第二个参数是对象的哪个属性
      //   name:toRef(person,"name"),
      //   age:toRef(person,"age"),
      //   salary:toRef(person.job.j1,"salary")

      // toRefs的使用:接收一个对象作为参数，它会遍历对象身上的所有属性，然后挨个调用toRef执行
      ...toRefs(person),
    };
  },
};
</script>
  
<style>
</style>