Vue 3 中的 ref 和 reactive 有什么区别？

Vue 3 中的 ref 和 reactive 有什么区别？

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

• ref 用于创建一个响应式的“引用”对象，适用于基本类型（如 number、string、boolean）或需要在模板中直接使用的响应式变量。ref 返回的对象具有一个 .value 属性来访问或修改其内部值，在模板中使用时 Vue 会自动解包 .value。
• reactive 用于将一个普通对象（或数组）转换为响应式对象，它基于 ES6 Proxy 实现，只能对对象类型起作用。reactive 返回的是一个代理对象，不需要通过 .value 访问属性。

解析：

import { ref, reactive } from 'vue';

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

// 使用 reactive
const state = reactive({ count: 0 });
console.log(state.count); // 0
state.count++;

• 如果你处理的是基本类型，或者希望在组合式 API 中导出一个可以被模板直接使用的变量（比如在 setup() 中 return 出去），通常使用 ref。
• 如果你有一个复杂的对象结构（如表单状态、配置对象等），使用 reactive 更自然，避免频繁写 .value。
• 注意：ref 包装的对象（如 ref({ a: 1 })）内部仍然是非响应式的，除非该对象本身也被 reactive 包裹；而 reactive 不能用于基本类型。

此外，在模板中使用 ref 时无需 .value，Vue 会自动解包；但在 JavaScript 逻辑中必须通过 .value 访问。这是初学者常犯的错误之一。