reactive和torefs

Reactive 和 toRefs 是 Vue 3 中的两个重要的 API，用于处理响应式数据。

Reactive API 允许你将一个普通的 JavaScript 对象转换为响应式对象。通过使用 reactive 函数，可以追踪对象的变化并在其发生时进行更新。例如：

import { reactive } from 'vue'

const state = reactive({
  count: 0
})

console.log(state.count) // 输出: 0

state.count++ // 修改 count 的值

console.log(state.count) // 输出: 1

toRefs API 则用于将一个响应式对象转换为普通的 JavaScript 对象，并将其属性转换为 ref 对象，这样在模板中使用时可以更方便地访问和修改属性的值。例如：

import { reactive, toRefs } from 'vue'

const state = reactive({
  count: 0
})

const stateRefs = toRefs(state)

console.log(stateRefs.count.value) // 输出: 0

state.count++ // 修改 count 的值

console.log(stateRefs.count.value) // 输出: 1

使用 toRefs 将响应式对象转换为 ref 对象，可以确保在模板中访问属性时能够正确地触发重新渲染。这在 Vue 3 中是非常有用的特性，因为在 Vue 2 中，直接访问响应式对象的属性可能会导致一些问题。