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

1. 工具函数的作用与设计背景

Vue3 的响应式系统提供了一系列工具函数，用于判断或转换响应式对象，例如：

• isProxy：检查对象是否为响应式代理（包括 reactive 或 readonly 包装的对象）。
• isReactive：检查对象是否为 reactive 创建的响应式代理。
• isReadonly：检查对象是否为 readonly 创建的只读代理。
• toRaw：返回代理对象的原始原始对象。

这些工具函数的实现依赖于响应式代理对象的内部标记，通过代理对象的特殊属性（如 __v_*）进行逻辑判断。

2. 源码中的内部标记与类型定义

在 Vue3 源码中，响应式对象会携带内部标记（通过 WeakMap 或 Symbol 属性存储），例如：

// 标记响应式类型的枚举  
enum ReactiveFlags {  
  RAW = '__v_raw',         // 存储原始对象的键  
  IS_REACTIVE = '__v_isReactive',  
  IS_READONLY = '__v_isReadonly',  
  IS_PROXY = '__v_isProxy'  
}  

当创建代理时，这些标记会被附加到代理对象上，例如：

• reactive(obj) 生成的代理会设置 __v_isReactive = true。
• readonly(obj) 生成的代理会设置 __v_isReadonly = true。

3. 工具函数的实现原理

（1）isReactive 与 isReadonly

通过检查代理对象的 ReactiveFlags 属性值直接判断：

function isReactive(value: unknown): boolean {  
  // 通过访问代理的 __v_isReactive 属性判断  
  return !!(value && value[ReactiveFlags.IS_REACTIVE]);  
}  

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

注意：如果对 readonly(reactive(obj)) 嵌套调用，isReactive 会返回 false（因为外层是只读代理），但源码中通过递归检查原始对象解决了这一问题。

（2）isProxy

结合 isReactive 和 isReadonly 的结果：

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

（3）toRaw

通过递归访问代理对象的 __v_raw 属性，直到返回原始对象：

function toRaw<T>(observed: T): T {  
  // 如果 observed 是代理，则递归获取其 __v_raw 指向的原始对象  
  const raw = observed && observed[ReactiveFlags.RAW];  
  return raw ? toRaw(raw) : observed;  
}  

例如：

const obj = {};  
const reactiveObj = reactive(obj);  
const readonlyObj = readonly(reactiveObj);  
toRaw(readonlyObj) === obj; // true  

4. 嵌套代理的特殊处理

当多次代理同一对象时（如 readonly(reactive(obj))），工具函数需要确保结果符合直觉：

• isReadonly(readonly(reactive(obj))) 返回 true。
• isReactive(readonly(reactive(obj))) 返回 false，但 isReactive(toRaw(readonlyObj)) 返回 true。
  源码中通过代理层级传递标记解决这一问题，例如内层 reactive 代理的 __v_isReactive 会被外层代理正确传递。

5. 实际应用场景

• 调试：通过 toRaw 直接操作原始对象，避免代理逻辑干扰。
• 逻辑优化：根据 isReactive 或 isReadonly 判断是否需额外处理。
• 边界检查：在需要确保数据不可变的场景（如插件开发）中使用 isReadonly 验证。

6. 总结

Vue3 的响应式工具函数通过代理对象的内部标记实现高效的类型判断和原始对象获取，其设计充分考虑了嵌套代理的边界情况，保证了API的可靠性和直观性。理解这些工具有助于在复杂场景下正确操作响应式数据。