1. 处理 shallow 参数

   关键点

   通过 createGetter 的第二个参数 shallow 来判断是否是浅层代理

   代码

   baseHandlers.ts

   // 继续组合基础拦截器
   const shallowGet = /*#__PURE__*/ createGetter(false, true);
   const shallowSet = /*#__PURE__*/ createSetter(true);
   
   const shallowReadonlyGet = /*#__PURE__*/ createGetter(true, true);
   
   function createGetter(isReadonly = false, shallow = false) {
    // ...
   
    // 在递归处理深层属性之前，先判断是否是浅层代理，如果是则直接返回结果
    if (shallow) {
      return result;
    }
   
    if (isObject(result)) {
      return isReadonly ? readonly(result) : reactive(result);
    }
   
    return result;
   }

2. 组合 shallowReactiveHandlers

   关键点

   浅层代理与深层代理唯一不同的区别就是在 get 阶段是否继续递归包装对象，因此可以通过 Object.assign 的方式来复用已有 handlers 再按需覆盖

   代码

   baseHandlers.ts

   export const shallowReactiveHandlers: ProxyHandler<object> = extend({}, readonlyHandlers, {
     get: shallowGet,
     set: shallowSet,
   });

   utils.ts

   export const extend = Object.assign;

3. shallowReactive 函数

   在 handlers 准备好以后，对外就可以像 reactive 一样再包一层 API。最终将其暴露给外部进行使用

   代码

   reactive.ts

   export function shallowReactive<T extends object>(target: T): T;
   export function shallowReactive<T>(target: T): T;
   
   export function shallowReactive(target: unknown) {
     return createReactiveObject(target as Target, false, shallowReactiveHandlers);
   }

贡献者: ZhaoJiSen

上一页实现只读代理

下一页完善副作用机制