手写Vue3响应式

const observeWeakMap = new WeakMap();
let activeEffect = null;
// 添加执行副作用函数并收集依赖
export const effect = (eff) => {
  activeEffect = eff;
  activeEffect();
  activeEffect = null;
};
// activeEffect执行时如果有触发get，则执行track
// 将响应式对象的副作用函数收集到一个weakMap
const track = (target, key) => {
  if (activeEffect) {
    // 得到target对象对应的Map:(key：new Set())
    // key 为属性
    // set 里保存的是多个副作用函数
    let depsMap = observeWeakMap.get(target);
    if (!depsMap) {
      depsMap = new Map();
      observeWeakMap.set(target, depsMap);
    }
    let depsSet = depsMap.get(key);
    if (!depsSet) {
      depsSet = new Set();
      depsMap.set(key, depsSet);
    }
    depsSet.add(activeEffect);
  }
};
// 在set时调用trigger
const trigger = (target, key) => {
  const depsMap = observeWeakMap.get(target);
  if (!depsMap) return;
  const depsSet = depsMap.get(key);
  if (!depsSet) return;
  depsSet.forEach((eff) => {
    eff();
  });
};

export const reactive = (target) => {
  const handler = {
    get(target, key, receiver) {
      const result = Reflect.get(target, key, receiver);
      track(target, key);
      return result;
    },
    set(target, key, value, receiver) {
      const oldValue = Reflect.get(target, key, receiver);
      const result = Reflect.set(target, key, value, receiver);
      if (oldValue !== value) {
        trigger(target, key);
      }
      return result;
    },
  };
  return new Proxy(target, handler);
};
export const ref = (value) => {
  const target = { _value: value };
  const key = "value";
  const _key = "_value";
  Object.defineProperty(target, key, {
    get() {
      const result = Reflect.get(target, _key);
      track(target, key);
      return result;
    },
    set(value) {
      const oldValue = Reflect.get(target, _key);
      Reflect.set(target, _key, value);
      if (oldValue !== value) {
        trigger(target, key);
      }
    },
  });
  return target;
};
export const computed = (getter) => {
  const r = {
    _dirty: true,
    _init: false,
    get value() {
      if (this._dirty) {
        if (!this._init) {
          activeEffect = () => {
            if (!this._dirty) this._dirty = true;
          };
        }
        this._value = getter();
        if (!this._init) {
          activeEffect = null;
          this._init = true;
        }
        this._dirty = false;
      }
      return this._value;
    },
  };
  return r;
};