vue3中torefs用法

在 Vue 3 中，toRefs() 是一个新的 API，它可以将响应式对象转换成一个由原对象属性转换而来的响应式 Ref 对象集合，以便在模板中使用。

toRefs() 方法接收一个响应式对象作为参数，返回一个由 Ref 对象集合组成的对象，每个 Ref 对象对应原对象的属性。

下面是 toRefs() 的用法示例：

<template>
  <div>
    <p>{{ user.name }}</p>
    <p>{{ user.age }}</p>
  </div>
</template>

<script>
import { reactive, toRefs } from 'vue';

export default {
  setup() {
    const user = reactive({
      name: 'Tom',
      age: 18
    });

    // 将响应式对象转换为 Ref 对象集合
    const refs = toRefs(user);

    return { user, ...refs };
  }
};
</script>

在上面的示例中，我们首先定义了一个响应式对象 user，然后使用 toRefs() 方法将其转换为一个由 Ref 对象组成的集合 refs，并在 setup() 函数中返回 user 和 refs 对象，以便在模板中使用。在模板中，我们可以直接使用 user 对象的属性，也可以使用 Ref 对象的 value 属性来获取属性值。