Vue3 的响应式系统源码级响应式 API 工具函数原理（isProxy、isReactive、isReadonly、toRaw 等）

1. 工具函数的作用与设计目标
Vue3 的响应式系统提供了一系列工具函数（如 isProxy、isReactive、isReadonly、toRaw 等），用于在运行时检测对象的响应式状态或获取原始对象。这些函数的核心目的是：

• 类型安全：帮助开发者区分普通对象、响应式对象、只读代理对象。
• 边界处理：避免在非响应式对象上误操作依赖收集或触发更新。
• 数据溯源：通过 toRaw 获取代理背后的原始对象，用于调试或特殊场景（如第三方库集成）。

2. 实现基础：响应式对象的内部标记
Vue3 在创建代理对象时，会通过 WeakMap 或内部属性（如 __v_*）存储元信息：

// 简化版内部标记  
const reactiveMap = new WeakMap();  // 存储原始对象到代理的映射  
const readonlyMap = new WeakMap();  
const proxyToRaw = new WeakMap();   // 存储代理到原始对象的反向映射  

每个代理对象在创建时会被标记类型（如 ReactiveFlags.IS_REACTIVE），例如：

const enum ReactiveFlags {  
  IS_REACTIVE = '__v_isReactive',  
  IS_READONLY = '__v_isReadonly',  
  RAW = '__v_raw'  
}  

3. 工具函数的实现原理
（1）isReactive

• 判断逻辑：检查对象是否存在 ReactiveFlags.IS_REACTIVE 属性且值为 true。
• 源码简化：

  function isReactive(value) {  
    return !!(value && value[ReactiveFlags.IS_REACTIVE]);  
  }  
  

• 关键点：仅在由 reactive() 创建的代理对象上返回 true，readonly(reactive(obj)) 的嵌套代理也会返回 true（因为内部代理仍是响应式的）。

（2）isReadonly

• 判断逻辑：检查 ReactiveFlags.IS_READONLY 标记。
• 源码简化：

  function isReadonly(value) {  
    return !!(value && value[ReactiveFlags.IS_READONLY]);  
  }  
  

• 注意：readonly(reactive(obj)) 返回 true，因为外层代理是只读的。

（3）isProxy

• 逻辑：组合判断 isReactive 或 isReadonly。
• 源码简化：

  function isProxy(value) {  
    return isReactive(value) || isReadonly(value);  
  }  
  

（4）toRaw

• 作用：递归获取代理对象背后的原始对象（剥除所有代理层）。
• 实现机制：
  1. 通过 ReactiveFlags.RAW 属性逐层向上查找原始对象。
  2. 若对象无此标记，直接返回对象本身。
• 源码简化：

  function toRaw(observed) {  
    const raw = observed && observed[ReactiveFlags.RAW];  
    return raw ? toRaw(raw) : observed;  
  }  
  

• 示例：

  const original = {};  
  const proxy = reactive(original);  
  const readOnlyProxy = readonly(proxy);  
  toRaw(readOnlyProxy) === original; // true  
  

4. 嵌套代理的特殊处理
Vue3 的响应式系统支持嵌套代理（如 readonly(reactive(obj))），工具函数需确保：

• isReadonly(readonly(reactive(obj))) 返回 true。
• isReactive(readonly(reactive(obj))) 返回 false（因为外层是只读代理）。
• toRaw 能穿透多层代理返回最内层的原始对象。

5. 边界情况与性能优化

• 非对象处理：对基本类型（如 number）直接返回 false 或原值。
• 缓存优化：频繁调用的工具函数（如 isReactive）通过内部标记避免重复计算。
• 安全限制：toRaw 仅用于调试或特殊场景，直接修改原始对象可能破坏响应式一致性。

6. 总结
这些工具函数通过代理对象的内部标记实现轻量级状态判断，其设计体现了 Vue3 响应式系统的类型分层与数据溯源能力，为开发者提供了更精细的响应式控制手段。