toRef 和 toRefs 函数

根据现有的 reactive 复杂数据类型，将其中的一个属性与另一个变量进行桥接映射，形成一个 ref 简单数据类型。
当创建出来的 ref 简单数据类型被修改时，原本的复杂数据类型中对应的属性也同步被修改。

toRef

import { toRef, reactive } from "vue";
export default {
  setup() {
    let a = reactive({
      b: 3,
      c: {
        d: {
          e: 4,
        },
      },
    });

    let aa = a.b; // aa = 3

    let bb = toRef(a, "b"); // bb = refImlp

    return {
      // 模板中使用时，直接使用 e ，且 e 被修改时，a.c.d.e 的值会同时被修改
      e: toRef(a.c.d, "e"),
    };
  },
};

相当于创建了一个 reactive 数据的代理对象，两个对应的数据会同步进行修改，且创建出来的代理对象也具有响应式属性。

toRefs

import { toRefs, reactive } from "vue";
export default {
  setup() {
    let a = reactive({
      b: 3,
      c: {
        d: {
          e: 4,
        },
      },
    });

    return {
      //将 a 数据的第一层数据：b、c 创建为 toRef 数据，并通过扩展运算符进行向外暴露
      ...toRefs(a),
    };
  },
};

只能将数据的第一层进行转换。此处，在外部使用属性 e 时，需要使用 c.d.e 进行使用。使用属性 b 时，可直接进行使用

# toRef 和 toRefs 函数

toRef 和 toRefs 函数