toRefs的用法

toRefs是什么

toRefs 是 Vue 3 Composition API 中的一个函数，它用于将响应式对象转换为普通对象，其中对象的每个属性都是 ref 对象。这是因为在 Vue 3 中，reactive 创建的对象的属性是响应式的，而不是 ref 对象。

使用 toRefs 的主要场景是在模板中使用响应式对象的属性时，因为在模板中使用 ref 对象的属性时，Vue 会自动解包它们。而对于响应式对象，你需要手动解包它们，或者使用 toRefs 进行转换。

下面是一个简单的例子：
因为toRefs 有不同的使用方式，具体取决于需求：
1、将整个响应式对象转换为 ref 对象：

const stateAsRef = toRefs(state);

2、仅转换某个属性：

const countAsRef = toRefs({ count: state.count });

3、在 setup 函数中使用：

import { toRefs } from 'vue';
export default {
  setup() {
    const state = reactive({
      count: 0,
      message: 'Hello, Vue 3!',
    });

    // 在 setup 函数中使用 toRefs
    const { count, message } = toRefs(state);

    return { count, message };
  },
};

在这个例子中，count 和 message 都是 ref 对象，可以直接在模板中使用，而无需手动解包。这样做的好处是，在模板中能够正确地触发更新，而不必担心 ref 和响应式对象之间的区别。

toRefs的作用以及为什么要用它？

当我们在模板中使用响应式对象的属性时，Vue 3 会自动追踪这些属性的依赖关系，确保在数据变化时触发重新渲染。但是，如果我们直接在模板中使用 reactive 创建的对象的属性，Vue 3 将不会自动追踪它们的依赖关系，Vue 3 不会自动将这个属性转换为 ref 对象，是因为 reactive 函数返回的对象是一个 Proxy 对象，而不是像 ref 那样直接包装的响应式对象。

ref 对象的特点是具有自动包装和解包的能力。当你在模板中使用 ref 对象的属性时，Vue 会自动解包这个属性，确保建立属性与视图的依赖关系，使其具备响应式特性。

而 reactive 返回的是一个 Proxy 对象，Proxy 是一种强大的对象拦截器，它可以拦截对象的各种操作，但它并不对对象进行自动解包。这就导致了在模板中直接使用 reactive 对象的属性时，Vue 不会自动解包，也就无法正确建立依赖关系。

toRefs 的作用就是解决这个问题。它会将响应式对象的每个属性转换为 ref 对象，使得在模板中使用这些属性时能够正确追踪依赖关系。这样，我们可以在模板中直接使用解构出来的 ref 对象，而不必担心依赖追踪的问题。

在模板中使用 toRefs 转换后的 ref 对象：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Message: {{ message }}</p>
  </div>
</template>

这样，Vue 将正确地追踪 count 和 message 的依赖关系，确保在它们变化时重新渲染视图。

需要注意的是，toRefs 主要用于解决在模板中使用 reactive 对象的属性时的依赖追踪问题。在其他场景，如果你需要获取 ref 对象，可以直接使用 ref 函数。
比如这样：

import { ref } from 'vue';

const count = ref(0);