Vue 3中，`toRef` 和 `toRefs`

在Vue 3中，`toRef` 和 `toRefs` 是两个帮助函数，它们用于从 `reactive` 对象中提取出响应式的引用。这两个函数在处理复杂的响应式状态或者在组合式API中非常有用。

### toRef

`toRef` 创建一个 `ref` 对象，它是一个对于 `reactive` 对象中某个属性的响应式引用。

**简单应用例子：**

```javascript
import { reactive, toRef } from 'vue';

const state = reactive({
  username: 'JohnDoe',
  age: 30
});

// 使用 toRef 从 reactive 对象中提取一个属性作为 ref
const usernameRef = toRef(state, 'username');

// 现在 usernameRef 是一个 ref 对象，它的 value 属性是响应式的
console.log(usernameRef.value); // 输出: 'JohnDoe'

// 修改 reactive 对象中的 username 属性
state.username = 'Alice';

// usernameRef 的 value 也随之更新，保持响应性
console.log(usernameRef.value); // 输出: 'Alice'
```

### toRefs

`toRefs` 接受一个 `reactive` 对象，并将其所有属性转换为一个包含 `ref` 对象的数组。

**简单应用例子：**

```javascript
import { reactive, toRefs } from 'vue';

const state = reactive({
  username: 'JohnDoe',
  a