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解构出来的变量 ++会改变原数据的值， 而直接解构出来的值相当于你重新声明的一个变量 ++改变的是新变量的值。