Vue3 中 toRefs 和 reactive 搭配使用 为什么要搭配使用

reactive和toRefs的搭配使用主要是为了解决在Vue3中使用Composition API时的一些问题。

至于Reactive 是干嘛用的在上一章节有说过 具体可以看
reactive 和ref区别和原理

首先，reactive是用来创建响应式对象的。当你传递一个普通的JavaScript对象给reactive，它会返回一个新的响应式对象。

然而，当你从响应式对象中解构属性时，这些属性会失去它们的响应性。这是因为解构操作实际上是在创建新的变量，这些变量只是响应式对象属性的初始值的副本，而不是响应式对象属性本身。

这就是toRefs的用武之地。toRefs可以将响应式对象转换为普通对象，该对象的每个属性都是一个ref，这样你就可以安全地解构这个对象，而不会失去响应性。

以下是一个例子:

import { reactive, toRefs } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0
    });

    // 这里我们使用toRefs，所以解构后的count仍然是响应式的
    const { count } = toRefs(state);

    return {
      count
    };
  }
}

在这个例子中，我们首先创建了一个响应式对象state，然后使用toRefs将其转换为一个新的对象，然后我们从这个新对象中解构出count。由于我们使用了toRefs，所以count仍然是响应式的，当state.count改变时，count也会改变。

同时为了更方便使用 在模版里使用的时候还可以使用:

<template>
 <div>{{count}}</div>
</template>

<script lang="ts">
import { reactive, toRefs } from 'vue';
export default {
  setup() {
    const state = reactive({
     count:0
    });
    return {
      ...toRefs(state),
    };
  },
};
</script>

然后接下来就是toRefs 的原理了 感兴趣的可以了解一下：

toRefs函数的主要目的是将一个响应式对象转换为一个普通对象，该对象的每个属性都是一个ref，这样你就可以安全地解构这个对象，而不会失去响应性。

toRefs的实现原理是遍历传入的响应式对象的每个属性，并为每个属性创建一个新的ref。这个ref的值不是直接从原始对象中获取的，而是通过一个计算属性来获取的，这个计算属性的getter和setter分别对应于原始对象的属性。这样，即使你解构了这个ref，它仍然能够保持与原始对象的响应性连接。

以下是一个简化的toRefs的实现：

function toRefs(object) {
  const result = {};
  for (let key in object) {
    result[key] = toRef(object, key);
  }
  return result;
}

function toRef(object, key) {
  return {
    get() {
      return object[key];
    },
    set(newValue) {
      object[key] = newValue;
    }
  };
}

请注意，这是一个简化的版本，实际的toRefs实现会更复杂，包括处理数组和嵌套对象，以及确保ref的值始终是响应式的。但是，这个简化的版本应该足以说明toRefs的基本工作原理。