响应式数据reactive，toRefs怎么使用及例子

响应式数据在Vue.js中是一种设计理念，它使得组件的状态能够自动更新，当你依赖的数据源发生变化时，视图会自动地跟着变化。而在React中，虽然没有直接叫做“响应式”，但它通过React Hooks如`useState`、`useReducer`、`useContext`等以及React的生命周期方法可以间接实现状态管理，确保UI随数据同步。

`toRefs`是Vue 3中提供的一个特性，用于将计算属性或者响应式的data转化为Ref实例，这样可以直接在模板中使用它们的当前值，就像处理原始的`ref`一样。例如：

<template>
  <div>
    <!-- 这里使用toRefs -->
    <input v-model="name" />
    <p>名字：{{ name }}</p>
    <p>年龄：{{ age }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 使用toRefs包装响应式数据
const data = reactive({ name: '', age: 0 });
const nameRef = toRef(data, 'name');
const ageRef = toRef(data, 'age');

// 直接在模板中使用ref
<input :value="nameRef.value" @input="$emit('update:name', $event.target.value)" />
<p>{{ ageRef.value }}</p>
</script>

在这个例子中，当我们修改输入框的值时，`name`的显示会实时更新，因为`nameRef`关联的是一个响应式变量。