从 Proxy 到 Vue3 响应式

/**
 * target: 目标对象
 * handler: 一个对象, 是操作target时所对应的某些处理函数
 */
new Proxy(target, handler)

const arr = new Proxy([1, 2, 3], {
  get(target, p, receiver) {
    return Reflect.get(target, p < 0 ? `${+p + target.length}` : p, receiver);
  },
});
console.log(arr[-1]); // 3

// 定义全局方法
const globalFunc = {
  double: (n) => n * 2,
  pow: (n) => Math.pow(n, 2),
  round: (n) => Math.round(n),
};
const pip = (value) => {
  let funcList = [];
  const func = new Proxy({}, {
      get(target, p) {
        if (p === "exec") {
          return funcList.reduce((val, fn) => fn(val), value);
        }
        funcList.push(globalFunc[p]);
        return func;
      },
    }
  );
  return func;
};
console.log(pip(3.4).double.pow.round.exec); // 46

const testA = { _m: "m_A", _n: "n_A" };
const testB = {
  _m: "m_B",
  _n: "n_B",
  get m() { return this._m; },
  get n() { return this._n; },
};

const proxy = new Proxy(testB, {
  get(target, p, receiver) {
    if (p === 'm') return Reflect.get(target, p, testA);
    return Reflect.get(target, p, receiver);
  },
});
console.log(proxy.m, proxy.n); // m_A, n_B

const obj = { 
  _name: 'test',
  getName() { return this._name; } // 这个也没有办法拿到_name
 };

const proxy = new Proxy(obj, {
  get(target, p, receiver) {
    if (p.startsWith('_')) {
      console.warn('cannot read private prop redirectly')
      return null
    }
    return Reflect.get(target, p, receiver);
  },
});
console.log(proxy._name); // warning

const proxy = new Proxy({ a: 1 }, {
  get(target, p, receiver) {
    console.log(`GET ${p}`);
    return Reflect.get(target, p, receiver);
  },
});
const obj = Object.create(proxy);
console.log(obj.a);
// GET a
// 1

const obj = Object.freeze({});
try {
 Object.defineProperty(obj, 'a', { value: 1 });
} catch (error) {
  console.log('Object: ', error);
  // Object:  TypeError: Cannot define property foo, object is not extensible
}

const res = Reflect.defineProperty(obj, 'a', { value: 1 });
console.log('Reflect: ', res); // Reflect:  false

const obj = { a: 1,  b: 2 };

console.log('Object: ', 'a' in obj);
console.log('Reflect: ', Reflect.has(obj, 'a'));

delete obj.a;
Reflect.deleteProperty(obj, 'b');

const proxy = new Proxy(obj, {
  get(target, name) {
    console.log('get ', target, name);
    // 调用原生方法
    return Reflect.get(target, name); 
  },
  deleteProperty(target, name) {
    console.log('delete ' + name);
    // 调用原生方法
    return Reflect.deleteProperty(target, name);
  },
  has(target, name) {
    console.log('has ' + name);
    // 调用原生方法
    return Reflect.has(target, name);
  }
});

function reactive(target) {
    // 如果target已经是只读的响应式对象, 则直接返回只读的版本, 例如一般的computed类型
    if (isReadonly(target)) {
        return target;
    }
    return createReactiveObject(target, false, mutableHandlers, mutableCollectionHandlers, reactiveMap);
}

function createReactiveObject(target, isReadonly, baseHandlers, collectionHandlers, proxyMap) {
    // 只有非空的对象类型, 才会去创建代理, 否则会直接返回原始值
    if (!shared.isObject(target)) {
        return target;
    }
    // 如果目标对象已经是响应式的也直接返回, 除非是创建一个他的只读副本
    if (target["__v_raw" /* RAW */] && !(isReadonly && target["__v_isReactive"])) {
        return target;
    }
    // proxyMap即reactiveMap, 上面说了缓存了对象代理状态, 已代理过的就从缓存中直接获取, 并返回
    const existingProxy = proxyMap.get(target);
    if (existingProxy) {
        return existingProxy;
    }
    // 只有符合条件的对象, 才会去进行代理监听, 具体哪些类型, 下面说明
    const targetType = getTargetType(target);
    if (targetType === 0) {
        return target; 
    }
    // 根据不同类型的对象, 创建不同程度的监听方法
    const proxy = new Proxy(target, targetType === 2 ? collectionHandlers : baseHandlers);
    // 缓存当前原始对象和代理对象之间的映射关系
    proxyMap.set(target, proxy);
    return proxy;
}

const state = shallowReactive({ a: 1, b: { c: 2 } });
isReactive(state); // true, 当 state.a的值变化时, 可以被监听
isReactive(state.b); // false, 内层对象非响应式, 会原样返回

function createGetter(isReadonly = false, shallow = false) {
  return function get(target, key, receiver) {
    // 获取响应式状态: 一个对象不是只读的, 就是响应式的
    if (key === '__v_isReactive' /* IS_REACTIVE */) {
      return !isReadonly;
    }
    // 获取只读状态
    if (key === '__v_isReadonly' /* IS_READONLY */) {
      return isReadonly;
    }
    // 获取浅层状态
    if (key === '__v_isShallow' /* IS_SHALLOW */) {
      return shallow;
    }
    // 获取target的原始对象
    if (
      key === '__v_raw' /* RAW */ && receiver
            === (isReadonly
              ? shallow
                ? shallowReadonlyMap
                : readonlyMap
              : shallow
                ? shallowReactiveMap
                : reactiveMap
            ).get(target)
    ) {
      return target;
    }
    // 调用非只读数组的内置代理方法, arrayInstrumentations里有Vue3代理的方法, 下面详细说
    const targetIsArray = shared.isArray(target);
    if (!isReadonly && targetIsArray && shared.hasOwn(arrayInstrumentations, key)) {
      return Reflect.get(arrayInstrumentations, key, receiver);
    }
    // 直接先获取target对象的属性值
    const res = Reflect.get(target, key, receiver);
    // 获取的是默认Symbol或者内置的Symbol属性, 则直接返回
    if (shared.isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) {
      return res;
    }
    // 如果不是只读代理, 则有可能会改变属性值, 要进行依赖收集
    if (!isReadonly) {
      track(target, 'get' /* GET */, key);
    }
    // 如果是浅层代理, 则直接返回
    if (shallow) {
      return res;
    }
    // 如果获取的属性值是ref对象, 则判断是否需要自动解包
    if (isRef(res)) {
      // 数组或者数值类型, 则不解包
      const shouldUnwrap = !targetIsArray || !shared.isIntegerKey(key);
      return shouldUnwrap ? res.value : res;
    }
    // 获取的属性值是个对象, 因为不是浅层代理, 所以返回值也需要转为代理对象
    if (shared.isObject(res)) {
      return isReadonly ? readonly(res) : reactive(res);
    }
    return res;
  };
}

set(target, key) { return true; }

function createSetter(shallow = false) {
  return function set(target, key, value, receiver) {
    // 先获取一下对应key原来的值
    let oldValue = target[key];
    // 对于原来值是只读ref对象, 是不允许改变其本来的ref属性的
    if (isReadonly(oldValue) && isRef(oldValue) && !isRef(value)) {
      return false;
    }
    // 如果target是非浅层响应式代理, 并且新值value非只读
    if (!shallow && !isReadonly(value)) {
      // 如果新值value是非浅层响应式的, 则对新旧值进行解包, 拿到原始对象
      if (!isShallow(value)) {
        value = toRaw(value);
        oldValue = toRaw(oldValue);
      }
      // 非数组, 值由响应式变为非响应式, 则直接赋值, 退出
      if (!shared.isArray(target) && isRef(oldValue) && !isRef(value)) {
        oldValue.value = value;
        return true;
      }
    }
    // 用于判断是不是要往数组或对象里添加新元素
    const hadKey = shared.isArray(target) && shared.isIntegerKey(key)
      ? Number(key) < target.length
      : shared.hasOwn(target, key);
    // 设置target的key值
    const result = Reflect.set(target, key, value, receiver);
    // 只对当前实例属性做依赖处理, 如果是原型链中的某个元素，则不要触发
    if (target === toRaw(receiver)) {
      // 如果是新增元素, 则激活add类型的触发器,进行依赖处理
      if (!hadKey) {
        trigger(target, 'add' /* ADD */, key, value);
      } else if (shared.hasChanged(value, oldValue)) {
        // 如果是修改元素值, 并且新旧值不一样, 则激活set类型的触发器,进行依赖处理
        trigger(target, 'set' /* SET */, key, value);
      }
    }
    return result;
  };
}

const state = reactive({ a: 1 });
const comp = computed(() => state.a + 1); // 只读的ref对象
const test = ref({ c: comp }); // 将其初始化给ref属性的c
test.value.c = 2; // 把c的值动态改为数字类型, 触发 proxy 的set
// 赋值不被允许, 直接返回 false, 立即报错 
// TypeError: 'set' on proxy: trap returned falsish for property 'c'

class RefImpl {
  constructor(value, __v_isShallow) {
    this.__v_isShallow = __v_isShallow; // 浅层对象标识
    this.dep = undefined; // 依赖收集器
    this.__v_isRef = true; // ref标识
    // 浅层对象会原样存储和暴露, 不转为响应式
    this._rawValue = __v_isShallow ? value : toRaw(value);
    this._value = __v_isShallow ? value : toReactive(value);
  }

  get value() {
    trackRefValue(this); // 当有调用方时, 往this.dep中添加依赖
    return this._value; // 返回对应响应式值
  }

  set value(newVal) {
    // 设置新值
    newVal = this.__v_isShallow ? newVal : toRaw(newVal);
    // 当值发生变化的时候, 更新相关属性, 并且会根据收集的依赖进行逐个触发, 通知值变化
    if (shared.hasChanged(newVal, this._rawValue)) {
      this._rawValue = newVal;
      this._value = this.__v_isShallow ? newVal : toReactive(newVal);
      triggerRefValue(this);
    }
  }
}

const refA = ref({ a: 1 });
const shallowRefB = shallowRef({ a: 1 });
const c = computed(() => (refA.value.a + 1));

class ComputedRefImpl {
  // 如果初始化computed传入的是函数, 则getter就是该函数, _setter是个空函数, isReadonly为true
  // 如果初始化computed传入的是对象, 则分别将get、set赋值给getter、setter, isReadonly取决于是否定义了set
  constructor(getter, _setter, isReadonly, isSSR) {
    this._setter = _setter; // 初始化setter函数
    this.dep = undefined; // 依赖收集齐
    this.__v_isRef = true; // ref标识
    this._dirty = true; // 是否被引用, true为未被引用
    // 副作用处理器件, 主要是当有地方引用computed时, 进行依赖收集和处理
    this.effect = new ReactiveEffect(getter, () => {
      // 当有被其他对象引用, 且触发副作用时, 会执行这里
      if (!this._dirty) {
        this._dirty = true;
        triggerRefValue(this);
      }
    });
    this.effect.computed = this; // 在副作用处理器中关联
    // 副作用处理器是否有效
    this.effect.active = this._cacheable = !isSSR; 
    // 只读标识
    this['__v_isReadonly' /* IS_READONLY */] = isReadonly;
  }

  get value() { 
    // 针对于只读的对象, reactive不会进行处理, 需要在对象自身中进行响应式处理
    const self = toRaw(this);
    trackRefValue(self);
    // 如果存在被引用的情况, 则进行依赖处理, 并计算computed的value值
    if (self._dirty || !self._cacheable) {
      self._dirty = false;
      self._value = self.effect.run();
    }
    return self._value;
  }

  set value(newValue) {
    this._setter(newValue);
  }
}

const computedC = computed(() => (refA.value.a + 1));
const computedD = computed(() => (refA.value.a + 2));

class ReactiveEffect {
    ...
    run() {
        ...
        try {
            this.parent = activeEffect;
            activeEffect = this;
            ...
        }
    }
}       
function trackEffects(dep, debuggerEventExtraInfo) {
    ...
    if (shouldTrack) {
        dep.add(activeEffect);
        activeEffect.deps.push(dep);
    }
}