Vue3 中 ref 与 reactive 的区别及底层原理详解
一、核心区别
1. 数据类型与使用场景
• ref
可定义基本类型（字符串、数字、布尔值）和对象类型的响应式数据。对于对象类型，`ref` 内部会自动调用 `reactive` 将其转换为响应式对象。 语法特点：需通过 `.value` 访问或修改数据（模板中自动解包，无需 `.value`）。 适用场景：简单数据、需跨组件传递的独立变量、需要重新赋值的场景（如替换整个对象）。
• reactive
仅支持对象类型（对象、数组、Map/Set 等），通过 `Proxy` 实现深度响应式代理。 语法特点：直接访问属性（如 `state.count`），无需 `.value`，但无法直接替换整个对象（需用 `Object.assign` 合并更新）。 适用场景：复杂嵌套对象、需深度响应式追踪的复杂数据结构。
2. 响应式机制差异
ref 底层原理
通过封装对象的 `.value` 属性实现响应式： ◦ 对基本类型使用 `Object.defineProperty` 的 `get/set` 进行数据劫持。 ◦ 对对象类型内部调用 `reactive` 转换为 `Proxy` 代理。 ```javascript// 简化的 ref 实现逻辑function ref(value) {return {get value() { track(this, 'value'); return value; },set value(newVal) { value = newVal; trigger(this, 'value'); }};}```
reactive 底层原理
基于 `Proxy` 拦截对象属性的增删改查，结合 `Reflect` 操作原始数据： ```javascript// 简化的 reactive 实现逻辑function reactive(obj) {return new Proxy(obj, {get(target, key) { track(target, key); return Reflect.get(target, key); },set(target, key, value) { Reflect.set(target, key, value); trigger(target, key); return true;}});}```所有嵌套属性均会被递归代理，实现深层响应性。
二、关键特性对比
| 特性 | ref | reactive |
|---|---|---|
| 数据类型 | 基本类型 + 对象类型 | 仅对象类型 |
| 访问方式 | 需 .value（模板自动解包） | 直接访问属性（如 state.key） |
| 重新赋值 | 支持（通过 .value =） | 需合并更新（如 Object.assign） |
| 解构响应性 | 解构后仍需 .value | 解构会丢失响应性，需 toRefs |
| 性能 | 基本类型更轻量 | 复杂对象更高效（Proxy 深度监听） |
三、设计理念与使用建议
1. 设计哲学
• ref 提供单一值响应式的原子化封装，适合组件间传递独立状态。
• reactive 针对复杂状态树设计，通过 Proxy 实现细粒度依赖追踪，优化深层更新性能。
2. 使用建议
• 优先 ref 的场景：
◦ 简单数据（如计数器、表单字段）。 ◦ 需要频繁替换整个对象（如接口返回数据更新）。
• 优先 reactive 的场景：
◦ 复杂配置对象（如含多层嵌套的表单数据）。 ◦ 需要自动追踪属性增删的场景（如动态表单字段）。
3. 注意事项
• reactive 直接替换整个对象会丢失响应性，需用 Object.assign 合并更新。
• 模板中 ref 对象自动解包，但 JavaScript 中必须使用 .value。
• 使用 toRefs 解构 reactive 对象可保持响应性。
四、总结
ref 和 reactive 是 Vue3 响应式系统的两大核心 API：
• ref 通过 .value 封装简化基本类型响应式，兼顾对象类型的灵活性。
• reactive 利用 Proxy 实现深度监听，适合复杂状态管理。
开发者应根据数据类型、更新频率及使用场景选择最合适的 API，必要时结合 toRefs 优化代码结构。
异步输出
async await后面的任务是会加入微任务队列，本身是同步函数的话直接就console.log()
this指向输出
const定义变量时不会被挂载到window上