vue3 torefs 和 toref

`toRefs` 和 `toRef` 都是 Vue 3 中的 Composition API 中的函数，用于将响应式对象转换为普通对象或将普通对象转换为响应式对象。

`toRefs` 可以将一个响应式对象的所有属性都转换为普通对象，每个属性都是一个 ref 对象，这样就可以在模板中使用解构语法来访问这些属性。例如：

import { reactive, toRefs } from 'vue'

const state = reactive({
  count: 0,
  message: 'Hello World'
})

export default {
  setup() {
    const { count, message } = toRefs(state)

    return {
      count,
      message
    }
  }
}

在模板中使用：

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

`toRef` 则是将一个普通对象的某个属性转换为 ref 对象，这样就可以在模板中使用解构语法来访问这个属性。例如：

import { ref, reactive, toRef } from 'vue'

const state = reactive({
  count: 0,
  message: 'Hello World'
})

export default {
  setup() {
    const countRef = toRef(state, 'count')

    return {
      count: countRef
    }
  }
}

在模板中使用：

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