使用toRefs()函数将一个对象的多个属性转换为响应式数据。

`toRefs()` 函数是 Vue 3 中用于响应式系统的一个工具函数，它可以将一个响应式对象的每个属性转换为一个响应式的 ref 对象。这样做的好处是可以保留属性的响应式特性，同时允许在模板中解构出各个属性，而不会丢失响应性。

使用 `toRefs()` 函数时，你传入一个响应式对象，它会返回一个新的对象，这个新对象的每个属性都是一个 ref 对象。这些 ref 对象都是响应式的，并且它们的 `value` 属性对应于原始对象中的属性值。这样，你就可以在模板或者函数中以普通属性的方式访问它们，而无需每次都通过 `.value` 来访问值。

举个例子，假设有一个响应式对象 `reactiveObj`：

import { reactive, toRefs } from 'vue';

const reactiveObj = reactive({
  name: 'Alice',
  age: 30,
  job: 'Engineer'
});

如果你想将 `reactiveObj` 的属性解构到模板中，并保持它们的响应性，你可以使用 `toRefs()`：

const { name, age, job } = toRefs(reactiveObj);

现在，`name`、`age` 和 `job` 都是 ref 对象，你可以像访问普通变量一样访问它们，而不会影响它们的响应性。如果 `reactiveObj` 中的某个属性发生变化，对应的 `name.value`、`age.value` 或 `job.value` 也会自动更新。