toRefs 和 toRef 是什么？

toRefs 是 Vue 3 提供的一个工具函数，用于将响应式对象的每个属性转换为独立的 ref。它通常与 reactive 一起使用，帮助我们在组件或组合式函数中更灵活地解构响应式对象，同时保持响应式特性。

为什么需要 toRefs？

1. 未使用 toRefs（会失去响应式）

在 Vue 3 中，reactive 创建的响应式对象，如果直接解构，会丢失响应式特性。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Message: {{ message }}</p>
    <button @click="increment">Increase</button>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";

// 创建响应式对象
const state = reactive({
  count: 0,
  message: "Hello",
});

// 解构响应式对象，解构后失去响应式
const { count, message } = state;

// 增加计数
const increment = () => {
  state.count++;
};
</script>

在这个示例中，直接解构 state 对象会导致 count 和 message 丧失响应式特性。

2. 使用 toRefs 保持响应式

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Message: {{ message }}</p>
    <button @click="increment">Increase</button>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs } from "vue";

// 创建响应式对象
const state = reactive({
  count: 0,
  message: "Hello",
});

// 使用 toRefs 保持响应式
const { count, message } = toRefs(state);

// 增加计数
const increment = () => {
  count.value++; // 直接修改 count 的值
};
</script>

在这个示例中，toRefs(state) 会将 state 中的每个属性转换为独立的 ref，从而确保解构后的 count 和 message 仍然是响应式的。

注意事项

• toRefs 不创建新的响应式对象： 它只是将每个属性转换为独立的 ref，仍然依赖原始 reactive 对象的响应式特性。
• 与 toRef 的区别：
  • toRefs 是批量处理的，转换整个对象。
  • toRef 是单独处理的，转换对象中的单个属性。

import { reactive, toRefs, toRef } from "vue";

const state = reactive({ count: 0, message: "Hello" });

// 使用 toRefs
const { count, message } = toRefs(state);

// 使用 toRef
const singleRef = toRef(state, "count");