Vue 3 中如何正确使用 ref 和 reactive 的区别是什么？

Vue 3 中如何正确使用 ref 和 reactive 的区别是什么？

回答：
在 Vue 3 中，ref 和 reactive 都用于创建响应式数据，但它们的使用方式和适用场景不同：

• ref 用于将基本类型（如 string、number、boolean）或对象包装成一个响应式的引用对象。访问或修改 ref 的值需要通过 .value 属性（在 setup() 函数内部），但在模板中可直接使用（Vue 会自动解包）。
• reactive 仅用于创建对象类型的响应式代理（如普通对象、数组等），它基于 ES6 Proxy 实现深层响应式。不能用于基本类型，且对整个对象进行代理，无需 .value。

示例：

import { ref, reactive } from 'vue';

// 使用 ref
const count = ref(0);
console.log(count.value); // 0
count.value++;

// 使用 reactive
const state = reactive({ name: 'Alice', age: 25 });
console.log(state.name); // Alice
state.age = 26;

解析：

• 如果你需要响应式地处理原始值（如数字、字符串），必须使用 ref。
• 如果你有一个对象或数组，并希望其所有属性都是响应式的，使用 reactive 更简洁。
• 注意：reactive 创建的对象是“深层响应式”的，而 ref 对象内部如果是对象，也会被 reactive 包裹（即 ref({}) 等价于 ref(reactive({}))）。
• 在模板中，ref 会被自动解包，因此可以直接写 {{ count }} 而不是 {{ count.value }}。
• 若将 reactive 对象解构（如 const { name } = state），会失去响应性，此时应配合 toRefs 使用。

选择 ref 还是 reactive 取决于数据类型和使用习惯，通常组合式 API 中 ref 更常用，因其通用性更强。