vue3中toRef和toRefs函数

1、问题1

如果把一个ref内的值赋值给变量，变量能响应式吗？

不能

  setup() {
    //数据
    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        j1: {
          salary: 20,
        },
      },
    });

    const name1 = person.name;
    console.log("%%%", name1);
    //返回一个对象（常用）
    return {
      person,
      name1,
    };
  }

例子：

2、问题二 

如果利用ref函数将某个对象中的属性变成响应式数据，修改响应式数据会不会影响到原始数据？

不会

<template>
  <h4>{{ person }}</h4>
  <h2>姓名：{{ name }}</h2>
  <h2>年龄：{{ age }}</h2>
  <h2>薪资：{{ salary }}K</h2>
  <button @click="name += '~'">修改姓名</button>
  <button @click="age++">增长年龄</button>
  <button @click="salary++">涨薪</button>
</template>

<script>
import { reactive, ref } from "vue";
export default {
  name: "Demo",
  setup() {
    //数据
    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        j1: {
          salary: 20,
        },
      },
    });

    return {
      person,
      name: ref(person.name),
      age: ref(person.age),
      salary: ref(person.job.j1.salary),
    };
  },
};
</script>

3、toRef

let person = reactive({

      name: "张三",

      age: 18,

}）

• 作用：创建一个 ref 对象，其value值指向另一个对象中的某个属性。

• 语法：const name = toRef(person,'name')

•     const name = toRef(obj,'obj的属性名字')

• 应用: 要将响应式对象中的某个属性单独提供给外部使用时。

对比问题1和toRef

•  使用toRef将某个对象中的属性变成响应式数据，修改响应式数据是会影响到原始数据的。

 代码：

<template>
  <h4>{{ person }}</h4>
  <h2>姓名：{{ name }}</h2>
  <h2>年龄：{{ age }}</h2>
  <h2>薪资：{{ salary }}K</h2>
  <button @click="name += '~'">修改姓名</button>
  <button @click="age++">增长年龄</button>
  <button @click="salary++">涨薪</button>
</template>

<script>
import { reactive, toRef } from "vue";
export default {
  name: "Demo",
  setup() {
    //数据
    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        j1: {
          salary: 20,
        },
      },
    });

    return {
      person,
      name: toRef(person, "name"),
      age: toRef(person, "age"),
      salary: toRef(person.job.j1, "salary"),
    };
  },
};
</script>

4、toRefs

• 扩展：toRefs 与toRef功能一致，但可以批量创建多个 ref 对象，语法：toRefs(person)

•  一般用法和解构一起使用

注意：

如果在setup的return使用

return{

...toRefs(person),

}

在setup进入页面只会执行一次，如果后期再给person添加属性，这个属性不会是响应式的

代码：

<template>
  <h4>{{ person }}</h4>
  <h2>姓名：{{ name }}</h2>
  <h2>年龄：{{ age }}</h2>
  <h2>薪资：{{ job.j1.salary }}K</h2>
  <button @click="name += '~'">修改姓名</button>
  <button @click="age++">增长年龄</button>
  <button @click="job.j1.salary++">涨薪</button>
</template>

<script>
import { reactive, toRefs } from "vue";
export default {
  name: "Demo",
  setup() {
    //数据
    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        j1: {
          salary: 20,
        },
      },
    });

    //返回一个对象（常用）
    return {
      person,
      ...toRefs(person),
    };
  },
};
</script>

参考链接：

尚硅谷Vue2.0+Vue3.0全套教程，全网最新最强vuejs从入门到精通_哔哩哔哩_bilibili