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，所以解构后的co