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上