ref 和 reactive 有什么区别？

Question

Accepted Answer

两者都在 Composition API 中创建**响应式状态**，但它们的工作方式不同。`ref` 将**任何**值（包括原始类型）包装在响应式容器中；`reactive` 直接使对象**深度**响应式。 ## ref — 用于任何值，通过 .value 访问 ```vue ``` 关键特点：在 JavaScript 中，你通过 `.value` 访问 ref；在模板中，Vue 会自动解包。在脚本中忘记 `.value` 是最常见的初学者错误。 ## reactive — 用于对象，没有 .value ```vue ``` `reactive` 仅适用于对象/数组（不是原始类型），你直接使用其属性。 ## reactive 的陷阱：不要解构或重新赋值 ```js let state = reactive({ count: 0 }); state = { count: 5 }; // ❌ breaks reactivity (lost the reactive proxy) const { count } = state; // ❌ destructuring loses reactivity ``` 重新赋值 `reactive` 对象或解构其属性会**断开**它们的响应式连接——这是一个常见陷阱。`ref` 没有这个问题（你重新赋值 `.value`）。 ## 使用哪一个 ```text ref → primitives, and the recommended default (works for everything, easy to reassign) reactive→ when you want a grouped object of state without .value (but mind destructuring) ``` 许多团队标准化为**到处使用 `ref`** 以保持一致性。 ## 为什么这很重要 `ref` 和 `reactive` 是 Vue 3 Composition API 状态的基础。理解 `ref` 在脚本中需要 `.value`（在模板中自动解包）以及 `reactive` 在重新赋值/解构时会失去响应式，可以防止 Vue 中两个最常见的响应式错误。