Vue 3 中的 ref 和 reactive 有什么区别？如何选择使用哪一个？

Vue 3 中的 ref 和 reactive 有什么区别？如何选择使用哪一个？

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

• ref 用于创建一个响应式的“引用”对象，其内部值通过 .value 访问（在模板中可自动解包）。ref 可以用于基本类型（如 string、number、boolean）和对象。
• reactive 用于创建一个响应式的对象（或数组），它基于 ES6 Proxy 实现，只能作用于对象类型，不能用于基本类型。

使用示例：

import { ref, reactive } from 'vue';

// ref 示例
const count = ref(0);
console.log(count.value); // 0

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

如何选择：

• 如果你需要响应式的基本类型值（如 number、string），必须使用 ref。
• 如果你有一个对象或数组，并且不需要频繁替换整个对象，可以使用 reactive。
• 如果你希望在 setup() 中统一使用 .value 风格，或者需要将响应式数据作为 props 传递给子组件（尤其是可能被替换的情况），推荐使用 ref，因为 ref 更灵活，且在模板中自动解包，使用更直观。
• 注意：reactive 创建的对象如果被整体替换（如 state = { ... }），会失去响应性；而 ref 可以安全地重新赋值（ref.value = newValue）。

因此，在大多数情况下，尤其是初学者或需要更高灵活性时，优先使用 ref 是更安全、更一致的选择。