Vue 3 中 ref 和 reactive 的区别
区别
在Vue 3中，ref和reactive都是用于创建响应式数据的函数。
| 区别 | ref | reactive |
| 数据类型 | ref可以用于任意数据类型（原始类型、对象、数组等） | reactive只能用于对象和数组（即引用类型） |
| 访问方式 | ref返回的是一个响应式对象，需要通过.value属性来访问或修改其值。在模板中，Vue会自动解包，所以不需要写.value | reactive返回的是原始对象的响应式代理，可以直接访问和修改属性 |
| 重新赋值 | ref可以重新赋值整个对象，因为ref是通过.value来访问的，重新赋值.value会触发响应。 | reactive不能重新赋值整个对象，如果重新赋值会失去响应式。如果需要替换reactive的对象，可以通过Object.assign来合并属性，或者使用ref来包装对象。 |
| 解构与展开 | ref则没有这个问题，但注意在JavaScript中操作时需要.value，在模板中不需要。 | 使用reactive创建的对象，如果直接解构或展开，会失去响应式。为了保持响应式，可以使用toRefs将每个属性转换为ref。 |
| 原理 | ref内部使用Reactive来包装对象，对于非对象类型，则创建一个包装对象，然后通过getter和setter来实现响应式。 | reactive使用Proxy来实现响应式，并递归地将对象的所有属性都转换为响应式。 |
使用建议
- 使用 ref 的情况：
- 基本数据类型
- 需要重新赋值的对象
- 从组合式函数返回响应式数据
- 模板引用
- 使用 reactive 的情况：
- 复杂的对象状态
- 不需要重新赋值的状态对象
- 表单状态管理
- 希望代码更简洁（无需 .value）
- 最佳实践：
- 根据数据结构和需求选择合适的 API
- 在组合式函数中优先使用 ref
- 对于复杂状态对象，可以考虑使用 reactive
- 使用 TypeScript 时，ref 有更好的类型推断