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',
  age: 30
});

// 使用 toRefs 将 reactive 对象转换为多个 ref 对象
const { username, age } = toRefs(state);

// username 和 age 现在都是 ref 对象，它们的 value 属性是响应式的
console.log(username.value); // 输出: 'JohnDoe'
console.log(age.value);      // 输出: 30

// 修改 reactive 对象中的 age 属性
state.age = 31;

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

### 使用场景

- **跨组件传递**：当你需要将一个响应式状态作为多个 `ref` 对象传递给子组件时，`toRefs` 非常有用。
- **保持响应性**：在将响应式状态解构为单独的 `ref` 对象后，仍然希望保持其响应性，`toRef` 和 `toRefs` 可以帮你做到这一点。
- **函数参数**：如果你需要将响应式状态作为参数传递给函数，并且希望这些参数保持响应性，`toRef` 可以创建单独的 `ref` 对象。

### 注意事项

- `toRef` 和 `toRefs` 创建的 `ref` 对象与原始的 `reactive` 对象共享响应性依赖。如果原始对象被销毁，那么由 `toRef` 或 `toRefs` 创建的 `ref` 对象也会失去响应性。
- 当使用 `toRefs` 解构 `reactive` 对象时，每个 `ref` 对应于原对象的一个属性，并且它们都引用同一个 `reactive` 状态。

这两个函数提供了一种灵活的方式，让你可以在Vue 3的响应式系统中以解构和模块化的方式工作。