vue3中toRefs将对象转换为响应式的 ref

把一个响应式对象转换成普通对象，该普通对象的每个 property 都是一个 ref

应用: 当从合成函数返回响应式对象时，toRefs 非常有用，这样消费组件就可以在不丢失响应式的情况下对返回的对象进行分解使用

问题: reactive 对象取出的所有属性值都是非响应式的

解决: 利用 toRefs 可以将一个响应式 reactive 对象的所有原始属性转换为响应式的 ref 属性

<template>
  <div style="font-size: 14px;">
    <p>{{foo}}</p>
    <p>{{bar}}</p>
  </div>
</template>

<script lang="ts">
// vue3版本语法
import { defineComponent, reactive, toRefs, } from 'vue'

export default defineComponent({
  setup () {
    const state = reactive({
      foo: 1,
      bar: 2
    })
    
    const stateAsRefs = toRefs(state)
    // ref 和 原始property “链接”
    state.foo++
    console.log(stateAsRefs.foo.value) // 2
    stateAsRefs.foo.value++
    console.log(state.foo) // 3
    // toRefs后解构出的每个变量 还是是响应式数据-会更新
    const { foo } = toRefs(state)
    foo.value++
    console.log(foo) // 4
    // 直接解构出的每个变量,不再是响应式数据-不会更新
    let { bar } = state
    bar++
    console.log('直接解构出来的bar', bar,'state的bar',state.bar);
    
    return {
      // ...state,
      ...stateAsRefs,
    }
  },
})
</script>

页面显示效果：

可以看到加了toRefs解构出来的变量 ++会改变原数据的值， 而直接解构出来的值相当于你重新声明的一个变量 ++改变的是新变量的值。

欢迎关注我的原创文章：小伙伴们！我是一名热衷于前端开发的作者，致力于分享我的知识和经验，帮助其他学习前端的小伙伴们。在我的文章中，你将会找到大量关于前端开发的精彩内容。

学习前端技术是现代互联网时代中非常重要的一项技能。无论你是想成为一名专业的前端工程师，还是仅仅对前端开发感兴趣，我的文章将能为你提供宝贵的指导和知识。

在我的文章中，你将会学到如何使用HTML、CSS和JavaScript创建精美的网页。我将深入讲解每个语言的基础知识，并提供一些实用技巧和最佳实践。无论你是初学者还是有一定经验的开发者，我的文章都能够满足你的学习需求。

此外，我还会分享一些关于前端开发的最新动态和行业趋势。互联网技术在不断发展，新的框架和工具层出不穷。通过我的文章，你将会了解到最新的前端技术趋势，并了解如何应对这些变化。

我深知学习前端不易，因此我将尽力以简洁明了的方式解释复杂的概念，并提供一些易于理解的实例和案例。我希望我的文章能够帮助你更快地理解前端开发，并提升你的技能。

如果你想了解更多关于前端开发的内容，不妨关注我的原创文章。我会不定期更新，为你带来最新的前端技术和知识。感谢你的关注和支持，我们一起探讨交流技术共同进步，期待与你一同探索前端开发的奇妙世界！