vue3中toRefs用法

toRefs是Vue.js 3中的一个实用函数，用于将响应式对象转换为普通对象，其中每个属性都是一个ref对象。这在某些情况下很有用，特别是想要将一个包含多个响应式属性的对象传递给子组件时。

以下是toRefs的基本用法：

import { reactive, toRefs } from 'vue';
 
const reactiveObject = reactive({
  foo: 'bar',
  count: 0
});
 
// 使用toRefs将响应式对象转换为包含ref的普通对象
const refs = toRefs(reactiveObject);
 
// 现在，refs.foo 和 refs.count 都是ref对象
console.log(refs.foo.value); // 输出 'bar'
console.log(refs.count.value); // 输出 0

在上面的例子中，toRefs将reactiveObject对象中的每个属性都转换为一个ref对象。这是因为在Vue 3中，访问响应式对象的属性时需要使用.value。通过使用toRefs，你可以更方便地将这些属性传递给子组件，而无需在子组件中处理.value。