Vue3 的响应式系统源码级原始值包装与类型转换原理

描述
Vue3 的响应式系统基于 Proxy 实现，但 Proxy 无法直接代理原始值（如字符串、数字、布尔值）。为了统一处理，Vue3 通过 ref API 对原始值进行包装，使其具备响应式能力。同时，系统内部需处理响应式对象的类型转换（如 reactive 转换后的对象与原始对象的关系）。这一机制涉及引用包装、类型判断、自动脱 ref 等核心设计。

解题过程

1. 原始值的响应式限制

   • Proxy 只能代理对象，无法直接代理原始值（如 let count = 0）。
   • 若直接对原始值使用 reactive，Vue3 会返回原始值本身（无响应式效果）。
   • 示例：

     const num = reactive(0); // 无效，num 仍是原始值 0  
     

2. ref 的包装机制

   • ref 通过创建一个包含 value 属性的响应式对象来包装原始值。
   • 内部实现：

     function ref(value) {  
       return createRef(value, false); // false 表示非浅响应  
     }  
     function createRef(rawValue, shallow) {  
       if (isRef(rawValue)) return rawValue; // 避免重复包装  
       return new RefImpl(rawValue, shallow);  
     }  
     

   • RefImpl 类定义：

     class RefImpl {  
       constructor(value, shallow) {  
         this._shallow = shallow;  
         this._value = shallow ? value : toReactive(value); // 递归转换  
         this.dep = undefined; // 依赖收集器  
       }  
       get value() {  
         trackRefValue(this); // 依赖收集  
         return this._value;  
       }  
       set value(newVal) {  
         newVal = this._shallow ? newVal : toReactive(newVal);  
         if (hasChanged(newVal, this._value)) {  
           this._value = newVal;  
           triggerRefValue(this); // 触发更新  
         }  
       }  
     }  
     

   • 关键点：
     • toReactive(value) 对对象类型递归调用 reactive，原始值直接返回。
     • 通过 getter/setter 拦截 value 属性的访问和修改。

3. 自动脱 ref 机制

   • 在模板或 reactive 对象中，无需通过 .value 访问 ref（用户体验优化）。
   • 实现原理：
     • 模板编译时，对 ref 变量自动解包（编译阶段处理）。
     • reactive 对象在 getter 中判断属性值为 ref 时返回 value：

       function reactive(obj) {  
         const proxy = new Proxy(obj, {  
           get(target, key, receiver) {  
             const res = Reflect.get(target, key, receiver);  
             if (isRef(res)) return res.value; // 自动脱 ref  
             track(target, key); // 依赖收集  
             return isObject(res) ? reactive(res) : res; // 递归代理  
           }  
         });  
         return proxy;  
       }  
       

   • 例外：嵌套在数组或 Map 中的 ref 不自动脱包。

4. 类型转换工具函数

   • isRef：检查对象是否为 ref（通过 __v_isRef 内部标志）。
   • toRaw：返回响应式对象的原始对象（绕过 Proxy）：

     function toRaw(observed) {  
       const raw = observed && observed["__v_raw"];  
       return raw ? toRaw(raw) : observed;  
     }  
     

   • shallowRef：仅包装顶层原始值，内部不递归响应式化。

5. 总结

   • Ref 通过对象包装解决原始值响应式问题，兼顾统一性与性能。
   • 自动脱 ref 机制平衡了开发便利性与响应式精度。
   • 类型工具函数确保用户能灵活控制响应式深度与原始对象访问。