//設(shè)置響應(yīng)式對(duì)象
const proxy = reactive({a:1})
//當(dāng)proxy.a發(fā)生變化的時(shí)候,調(diào)用effect中的回調(diào)函數(shù)
effect(()=>{
 console.log(proxy.a)
})
proxy.a++

reactiveMap = {
  [object Object]:{
     [key]:new Set()
  }
}

let activeEffect = null;
const reactiveMap = new WeakMap();
function effect(fn) {
  const reactEffect = new ReactiveEffect(fn);
  reactEffect.run();//第一次立刻執(zhí)行副作用函數(shù)
}
//存放副作用的類
class ReactiveEffect {
  constructor(fn, scheduler) {
    this.fn = fn;
    this.scheduler = scheduler;//調(diào)度器
  }
  run() {
    try {
      //執(zhí)行之前先修改activeEffect
      activeEffect = this;
      return this.fn();
    } finally {
      //執(zhí)行完設(shè)置activeEffect為null
      activeEffect = null;
    }
  }
}

function reactive(obj) {
  //獲取值的時(shí)候收集依賴
  const getter = function (object, key, receiver) {
    const res = Reflect.get(object, key, receiver); //獲取真實(shí)的值
    track(object, key, res);
    if (typeof res === "object") {
      return reactive(res);
    }
    return res;
  };
  //當(dāng)設(shè)置值的時(shí)候觸發(fā)依賴
  const setter = function (object, key, value, receiver) {
    const res = Reflect.set(object, key, value, receiver);
    trigger(object, key, value, res);
    return res;
  };
  const mutations = {
    get: getter,
    set: setter,
  };
  const proxy = new Proxy(obj, mutations);
  return proxy;
}

function track(object, key, oldValue) {
  //首先看看之前是否有這個(gè)對(duì)象的depsMap
  //如果沒有表示是第一次收集創(chuàng)建一個(gè)new Map
  let depsMap = reactiveMap.get(object);
  if (!depsMap) {
    reactiveMap.set(object, (depsMap = new Map()));
  }
  //如果是第一次收集這個(gè)key,則創(chuàng)建一個(gè)新的dep依賴
  let dep = depsMap.get(key);
  if (!dep) {
    depsMap.set(key, (dep = new Set()));
  }
  找到這個(gè)target和key對(duì)應(yīng)的依賴之后進(jìn)行副作用收集
  trackEffects(dep);
}
function trackEffects(dep) {
  //因?yàn)樵O(shè)置的對(duì)象是響應(yīng)式的所以只要
  //響應(yīng)式對(duì)象改變都會(huì)收集,但是只有
  //在effect執(zhí)行的時(shí)候activeEffect才有值
  //才能收集到依賴并且dep采用了集合防止
  //重復(fù)收集同一個(gè)依賴
  if (activeEffect) {
    dep.add(activeEffect);
  }
}
//當(dāng)修改值的時(shí)候觸發(fā)依賴函數(shù)
function trigger(object, key, newVal, oldVal) {
  const depsMap = reactiveMap.get(object);
  const dep = depsMap.get(key);//找到target和key對(duì)應(yīng)的dep
  //執(zhí)行依賴函數(shù)
  if (dep.size > 0) {
    for (const effect of dep) {
      if (effect.scheduler) {
        effect.scheduler();
      } else effect.run();
    }
  }
}

function ref(value) {
  return createRef(value);
}
function createRef(value) {
  return new RefImpl(value);
}
class RefImpl {
  constructor(value) {
    this.__v_isRef = true;
    this._value = value;
  }
  get value() {
    track(this, "value");
    return this._value;
  }
  set value(value) {
    this._value = value;
    trigger(this, "value", value, this._value);
    return true;
  }
}

//設(shè)置響應(yīng)式
const proxy = reactive({ a: 1, b: { a: 1 } });
//設(shè)置計(jì)算屬性
const comp = computed(() => {
  return proxy.a + 1;
});
effect(() => {
  console.log(comp.value);
});
//當(dāng)proxy.a發(fā)生變化,讀取comp的value也會(huì)發(fā)生變化,并且因?yàn)閏omp是響應(yīng)式
//在effect中被收集了,所以當(dāng)proxy.a發(fā)生變化也會(huì)導(dǎo)致effect中的函數(shù)執(zhí)行
proxy.a++;

class ComputedRefImpl {
  constructor(getter) {
    //調(diào)度器
    this._effect = new ReactiveEffect(getter, () => {
      if (!this._dirty) {
        this._dirty = true;
        //修改了getter中監(jiān)聽到的值
        //引起對(duì)dep內(nèi)的更新
        for (const effect of this.dep) {
          if (effect.scheduler) {
            effect.scheduler();
          } else effect.run();
        }
      }
    });
    this.dep = new Set(); //依賴
    this._dirty = true; //是否需要更新
    this._value = null;
  }
  get value() {
    trackEffects(this.dep); //收集依賴
    if (this._dirty) {
      this._dirty = false;
      this._value = this._effect.run();
    }
    return this._value;
  }
}

const proxy = reactive({ a: 1, b: { a: 1 } });
const comp = computed(() => {
  return proxy.a + 1;
});
const proxyRef = ref(100);
effect(() => {
  console.log(proxy.b.a);
  console.log(comp.value);
});
effect(() => {
  console.log(proxyRef.value);
});
proxy.a++;
proxy.b.a++;
proxyRef.value++;
//log:1 2 100 1 3 2 3 101

//深度代理
export function reactive(target) {
  //如果被代理的是readonly返回已經(jīng)被readonly代理過的target
  if (isReadonly(target)) {
    return target;
  }
  return createReactiveObject(
    target,
    false,
    mutableHandlers,
    mutableCollectionHandlers,
    reactiveMap
  );
}
//只代理第一層
export function shallowReactive(target) {
  return createReactiveObject(
    target,
    false,
    shallowReactiveHandlers,
    shallowCollectionHandlers,
    shallowReactiveMap
  );
}
//代理只讀屬性
export function readonly(target) {
  return createReactiveObject(
    target,
    true,
    readonlyHandlers,
    readonlyCollectionHandlers,
    readonlyMap
  );
}
//只代理只讀的第一層
export function shallowReadonly(target) {
  return createReactiveObject(
    target,
    true,
    shallowReadonlyHandlers,
    shallowReadonlyCollectionHandlers,
    shallowReadonlyMap
  );
}

export function createReactiveObject(
  target,
  isReadonly,
  baseHandlers,
  collectionHandlers,
  proxyMap
) {
  //不能夠代理非對(duì)象
  if (!isObject(target)) {
    {
      console.warn(`value cannot be made reactive: ${String(target)}`);
    }
    return target;
  }
  //已經(jīng)代理過的對(duì)象不需要在進(jìn)行二次代理
  if (target[RAW] && !(isReadonly && target[IS_REACTIVE])) {
    return target;
  }
  //防止重復(fù)代理
  const existingProxy = proxyMap.get(target);
  if (existingProxy) {
    return existingProxy;
  }
  //獲取當(dāng)前被代理對(duì)象的類型
  //為0表示被代理對(duì)象為不可拓展對(duì)象
  //或者當(dāng)前對(duì)象含有__v_skip屬性
  //為1表示Array,Object類型用baseHandlers處理
  //為2表示map set weakMap weakSet 用collectionHandlers處理
  const targetType = getTargetType(target);
  //不可代理 返回原對(duì)象
  if (targetType === 0) {
    console.warn(`current target:${target} can not been proxy!`);
    return target;
  }
  //進(jìn)行代理
  const proxy = new Proxy(
    target,
    //判斷當(dāng)前代理對(duì)象的類型,如果是array object采用baseHandlers
    //如果是map set weakMap weakSet采用collectionHandlers
    targetType === 2 ? collectionHandlers : baseHandlers
  );
  proxyMap.set(target, proxy);
  //返回代理成功的對(duì)象
  return proxy;
}

//如果對(duì)象帶有__v_skip或則對(duì)象不可拓展則不可代理
//然后根據(jù)類型判斷需要哪種函數(shù)進(jìn)行代理
export function getTargetType(value) {
  return value[SKIP] || !Object.isExtensible(value)
    ? 0
    : targetTypeMap(toRawType(value));
}
//對(duì)截取的類型判斷 如果是object array返回1
//如果是set map weakMap weakSet返回2
export function targetTypeMap(rawType) {
  switch (rawType) {
    case "Object":
    case "Array":
      return 1;
    case "Map":
    case "Set":
    case "WeakMap":
    case "WeakSet":
      return 2;
    default:
      return 0;
  }
}
//截取類型
export const toRawType = (value) => {
  //截取[object Object]中的"Object"
  return Object.prototype.toString.call(value).slice(8, -1);
};

//reactive的proxy handlers
//這個(gè)便是new Proxy()中的第二個(gè)參數(shù),可以攔截get
//set deleteProperty has ownKeys等進(jìn)行處理
const mutableHandlers = {
  get,
  set,
  deleteProperty,
  has,
  ownKeys,
};
//處理readonly的proxy handler
const readonlyHandlers = {
  get: readonlyGet,
  //對(duì)于readonly的handlers不需要set值
  //打印警告,但是不修改值
  set(target, key) {
    {
      warn(
        `Set operation on key "${String(key)}" failed: target is readonly.`,
        target
      );
    }
    return true;
  },
  //對(duì)于只讀屬性,不能刪除值
  deleteProperty(target, key) {
    {
      warn(
        `Delete operation on key "${String(key)}" failed: target is readonly.`,
        target
      );
    }
    return true;
  },
};
//處理只代理第一層的proxy handler
const shallowReactiveHandlers = shared.extend({}, mutableHandlers, {
  get: shallowGet,
  set: shallowSet,
});
//處理只對(duì)第一層做只讀代理的proxy handler
const shallowReadonlyHandlers = shared.extend({}, readonlyHandlers, {
  get: shallowReadonlyGet,
});
//這里的shared.extend就是Object的assign方法
//shared.extend = Object.assgin

const get = createGetter();
const shallowGet = createGetter(false, true);
const readonlyGet = createGetter(true, false);
const shallowReadonlyGet = createGetter(true, true);

//創(chuàng)造getter的工廠函數(shù),通過是否是只讀和
//是否只代理第一層創(chuàng)造不同的getter函數(shù)
export function createGetter(isReadonly = false, shallow = false) {
  //傳遞進(jìn)入Proxy的get函數(shù)
  //例如const obj = {a:2}
  //    const proxy = new Proxy(obj,{
  //  get(target,key,receiver){
  //    當(dāng)通過proxy.a對(duì)obj進(jìn)行訪問的時(shí)候,會(huì)先進(jìn)入這個(gè)函數(shù)
  //     返回值將會(huì)作為proxy.a獲得的值
  //   }
  // })
  return function get(target, key, receiver) {
    //1.對(duì)isReadonly isShallow等方法的處理
    //以下前面幾個(gè)判斷都是為了通過一些關(guān)鍵key判斷
    //當(dāng)前的對(duì)象是否是被代理的,或者是否是只讀的
    //是否是只代理第一層的。
    //假設(shè)當(dāng)前我們的代理是reactive類型
    //如果我們?cè)L問__v_isReactive那么返回值應(yīng)該為true
    //同理訪問readonly類型則返回false
    //故而這里取反
    if (key === IS_REACTIVE) {
      return !isReadonly;
    }
    //訪問__v_isReadonly返回isReadonly真實(shí)值即可
    else if (key === IS_READONLY) {
      return isReadonly;
    }
    //訪問__v_isShallow 返回shallow真實(shí)值即可
    else if (key === IS_SHALLOW) {
      return shallow;
    }
    //當(dāng)訪問__v_raw的時(shí)候,根據(jù)當(dāng)前的readonly和shallow屬性
    //訪問不同的map表,通過map表獲得代理前的對(duì)象
    else if (
      key === RAW &&
      receiver ===
        (isReadonly
          ? shallow
            ? shallowReadonlyMap
            : readonlyMap
          : shallow
          ? shallowReactiveMap
          : reactiveMap
        ).get(target)
    ) {
      return target;
    }
    //判斷當(dāng)前target是否是數(shù)組
    const targetIsArray = isArray(target);
    //如果調(diào)用的push pop shift unshift splice includes indexOf lastIndexOf
    //攔截這個(gè)方法
    if (!isReadonly && targetIsArray && hasOwn(arrayInstrumentations, key)) {
      return Reflect.get(arrayInstrumentations, key, receiver);
    }
    //獲取訪問的真實(shí)值
    const res = Reflect.get(target, key, receiver);
    //判斷當(dāng)前訪問的key是否是內(nèi)置的Symbol屬性或則是否是不需要track的key
    //例如__proto__ , __v_isRef , __isVue 如果是這些屬性則直接返回
    if (isSymbol(key) ? builtInSymbols.has(key) : isNonTrackableKeys(key)) {
      return res;
    }
    //如果不是只讀屬性 開始收集依賴 只讀屬性不需要收集依賴
    if (!isReadonly) {
      track(target, trackOpTypes.get, key);
    }
    //只需要代理一層,不用再進(jìn)行代理了返回即可
    if (shallow) {
      return res;
    }
    //如果是訪問到的value是ref類型,返回res.value
    //訪問的是數(shù)組的數(shù)字屬性則返回res
    if (isRef(res)) {
      return targetIsArray && isIntegerKey(key) ? res : res.value;
    }
    //如果得到的結(jié)果依然是對(duì)象繼續(xù)進(jìn)行深度代理
    if (isObject(res)) {
      return isReadonly ? readonly(res) : reactive(res);
    }
    return res;
  };
}

//這里貼上源碼,感興趣的仔細(xì)閱讀,不在進(jìn)行講解
const isNonTrackableKeys = makeMap(`__proto__,__v_isRef,__isVue`);
function makeMap(str, expectsLowerCase) {
  const map = Object.create(null); //創(chuàng)造一個(gè)空對(duì)象
  const list = str.split(","); //["__proto__","__isVUE__"]
  for (let i = 0; i < list.length; i++) {
    map[list[i]] = true;
    //{"__proto__":true,"__isVUE__":true}
  }
  //返回一個(gè)函數(shù),用于判斷是否是傳遞的str分割出來的某一個(gè)值
  //可以通過expectsLowerCase指定是否需要將分隔值轉(zhuǎn)化為小寫
  return expectsLowerCase
    ? (val) => !!map[val.toLowerCase()]
    : (val) => !!map[val];
}
//Symbol的所有屬性值
export const builtInSymbols = new Set(
  //首先獲取所有的Symbol的key
  Object.getOwnPropertyNames(Symbol)
     //過濾掉arguments和caller
    .filter((key) => key !== "arguments" && key !== "caller")
     //拿到所有的Symbol值
    .map((key) => Symbol[key])
    //過濾掉不是symbol的值
    .filter(shared.isSymbol)
);

//當(dāng)前代理的對(duì)象是數(shù)組,且訪問了pop等8個(gè)方法中的一個(gè)
if (!isReadonly && targetIsArray && hasOwn(arrayInstrumentations, key)) {
      //進(jìn)行代理
      return Reflect.get(arrayInstrumentations, key, receiver);
}
const arrayInstrumentations = createArrayInstrumentations();
function createArrayInstrumentations() {
  const instrumentations = {};
  //攔截?cái)?shù)組的方法 arr.includes()
  ["includes", "indexOf", "lastIndexOf"].forEach((key) => {
    instrumentations[key] = function (...args) {
      //這里的this指向調(diào)用當(dāng)前方法的數(shù)組
      const arr = toRaw(this);
      //將當(dāng)前數(shù)組中的所有元素收集依賴
      for (let i = 0, l = this.length; i < l; i++) {
        track(arr, trackOpTypes.get, i + "");
      }
      //執(zhí)行函數(shù)
      const res = arr[key](...args);
      if (res === -1 || res === false) {
        return arr[key](...args.map(toRaw));
      } else {
        return res;
      }
    };
  });
  //如果使用這些方法取消收集依賴
  ["push", "pop", "shift", "unshift", "splice"].forEach((key) => {
    instrumentations[key] = function (...args) {
      //停止收集依賴 將shouldTrack變?yōu)閒alse
      pauseTracking();
      //這里toRaw是為了防止二次執(zhí)行g(shù)etter,執(zhí)行數(shù)組對(duì)應(yīng)的方法
      const res = toRaw(this)[key].apply(this, args);
      //重新收集依賴,將shouldTrack變?yōu)閠rue
      resetTracking();
      return res;
    };
  });
  return instrumentations;
}
//中斷追蹤
export function pauseTracking() {
  trackStack.push(shouldTrack);
  shouldTrack = false;
}
//重設(shè)追蹤
export function resetTracking() {
  //獲取之前的shouldTrack值
  const last = trackStack.pop();
  //如果trackStack中沒有值shouldTrack設(shè)置為true
  shouldTrack = last === undefined ? true : last;
}

export function track(target, type, key) {
  //當(dāng)調(diào)用了effect方法,會(huì)給activeEffect賦值
  if (shouldTrack && activeEffect) {
    let depsMap = targetMap.get(target);
    if (!depsMap) {
      targetMap.set(target, (depsMap = new Map()));
    }
    let dep = depsMap.get(key);
    if (!dep) {
      depsMap.set(key, (dep = createDep()));
    }
    //傳遞入生命周期鉤子的當(dāng)前effect的信息
    const eventInfo = { effect: activeEffect, target, type, key };
    trackEffects(dep, eventInfo);
  }
}

export class ReactiveEffect {
  constructor(fn, scheduler = null, scope) {
    this.fn = fn; //副作用函數(shù)
    //調(diào)度器(如果有調(diào)用器就不在執(zhí)行run方法而是執(zhí)行調(diào)度器)
    this.scheduler = scheduler;
    this.active = true;
    /**
     * 當(dāng)前副作用被那些變量所依賴
     * 例如:
     *  effect(()=>{
     *   console.log(proxy.a)
     *  })
     *  effect(()=>{
     *   console.log(proxy.a)
     *  })
     *
     *  每一個(gè)effect的回調(diào)函數(shù)都會(huì)產(chǎn)生一個(gè)ReactiveEffect實(shí)例
     *  第一個(gè)effect中有proxy.a被讀取,那么就會(huì)被收集依賴,則
     *  對(duì)于第一個(gè)ReactiveEffect實(shí)例來說deps中就有有proxy.a
     *  也就是target key 指向的dep,這個(gè)dep是一個(gè)集合,代表的是
     *  target key對(duì)應(yīng)的dep
     */
    this.deps = [];
    this.parent = undefined;
    //TODO recordEffectScope
    recordEffectScope(this, scope);
  }
  //開始執(zhí)行
  run() {
    if (!this.active) {
      return this.fn();
    }
    let parent = activeEffect;
    let lastShouldTrack = shouldTrack;
    while (parent) {
      if (parent === this) {
        return;
      }
      parent = parent.parent;
    }
    try {
      //可能有嵌套的effect,當(dāng)執(zhí)行到effect回調(diào)函數(shù)中有effect的時(shí)候
      //現(xiàn)在的activeEffect相當(dāng)于最新創(chuàng)建的effect的父級(jí)effect
      /*
        例如:effect(()=>{
            現(xiàn)在指向外部的effect
            console.log(proxy.a)
            effect(()=>{
              在這里面的時(shí)候activeEffect指向內(nèi)部effect
              console.log(proxy.b)
            })
            現(xiàn)在需要將activeEffect恢復(fù)為外部effect
            console.log(proxy.b)
        })
        當(dāng)然對(duì)應(yīng)的parent也應(yīng)該改變,這就是try finally的作用
      */
      this.parent = activeEffect;
      //讓當(dāng)前的activeEffect為當(dāng)前effect實(shí)例
      activeEffect = this;
      shouldTrack = true;
      //設(shè)置嵌套深度
      trackOpBit = 1 << ++effectTrackDepth;
      if (effectTrackDepth <= maxMarkerBits) {
        initDepMarkers(this);
      } else {
        cleanupEffect(this);
      }
      //執(zhí)行effect副作用
      return this.fn();
    } finally {
      //退出當(dāng)前effect回調(diào)函數(shù)的執(zhí)行,要將全局變量退回到當(dāng)前
      //effect的父級(jí)effect(回溯)
      if (effectTrackDepth <= maxMarkerBits) {
        finalizeDepMarkers(this);
      }
      //全部進(jìn)行回溯
      trackOpBit = 1 << --effectTrackDepth; //恢復(fù)trackOpBit
      activeEffect = this.parent;
      shouldTrack = lastShouldTrack;
      this.parent = undefined;
      if (this.deferStop) {
        this.stop();
      }
    }
  }
  stop() {
    if (activeEffect === this) {
      this.deferStop = true;
    } else if (this.active) {
      cleanupEffect(this);
      if (this.onStop) {
        this.onStop();
      }
      this.active = false;
    }
  }
}

//收集副作用
export function trackEffects(dep, debuggerEventExtraInfo) {
  let shouldTrack = false;
  if (effectTrackDepth <= maxMarkerBits) {
    if (!newTracked(dep)) {
      dep.n |= trackOpBit;
      shouldTrack = !wasTracked(dep);
    }
  } else {
    //如果已經(jīng)收集過就不收集了
    shouldTrack = !dep.has(activeEffect);
  }
  //通過上面的判斷是否需要收集
  if (shouldTrack) {
    //往當(dāng)前target key對(duì)應(yīng)的dep中添加effect
    dep.add(activeEffect);
    //當(dāng)前effect中有哪些被代理的變量的dep
    activeEffect.deps.push(dep);
    //生命周期,當(dāng)真正執(zhí)行track的時(shí)候調(diào)用函數(shù)
    if (activeEffect.onTrack) {
      activeEffect.onTrack({
        effect: activeEffect,
        ...debuggerEventExtraInfo,
      });
    }
  }
}

//創(chuàng)造setter的工廠函數(shù)
export function createSetter(shallow) {
  return function set(target, key, value, receiver) {
    let oldValue = target[key]; //獲取代理對(duì)象之前的value
    //舊值是ref,新值不是ref
    if (isReadonly(oldValue) && isRef(oldValue) && !isRef(value)) {
      return false;
    }
    //深度代理的情況
    if (!shallow) {
      if (!isShallow(value) && !isReadonly(value)) {
        //防止如果后面操作了value 引起二次setter
        oldValue = toRaw(oldValue);
        value = toRaw(value);
      }
      //target是對(duì)象且值為ref類型,當(dāng)對(duì)這個(gè)值修改的時(shí)候應(yīng)該修改ref.value
      if (!isArray(target) && isRef(oldValue) && !isRef(value)) {
        oldValue.value = value;
        return true;
      }
    }
    //判斷當(dāng)前訪問的key是否存在,不存在則是設(shè)置新的值
    const hadKey =
      //當(dāng)前的target為數(shù)組且訪問的是數(shù)字
      isArray(target) && isIntegerKey(key)
        ? Number(key) < target.length
        : hasOwn(target, key);
    //設(shè)置value
    const result = Reflect.set(target, key, value, receiver);
    if (target === toRaw(receiver)) {
      //設(shè)置新的值
      if (!hadKey) {
        trigger(target, triggerOpTypes.add, key, value);
      }
      //修改老的值
      else if (hasChanged(value, oldValue)) {
        trigger(target, triggerOpTypes.set, key, value, oldValue);
      }
    }
    return result;
  };
}

//根據(jù)不同的類型添加必要的副作用到deps中
export function trigger(target, type, key, newValue, oldValue, oldTarget) {
  const depsMap = targetMap.get(target);
  if (!depsMap) {
    return;
  }
  let deps = []; //當(dāng)前要處理的所有依賴
  if (type === triggerOpTypes.clear) {
    //清空,相當(dāng)于所有的元素都發(fā)生改變
    //故而全部都需要添加進(jìn)依賴
    deps = [...depsMap.values()];
  }
  //攔截修改數(shù)組長度的情況
  else if (key === "length" && isArray(target)) {
    //放入key為length或者數(shù)組下標(biāo)大于設(shè)置值的所以依賴
    //例如:const a = [1,2,3] a.length=1
    //那么數(shù)組長度發(fā)生了變化,2,3的依賴都應(yīng)該被放入
    depsMap.forEach((dep, key) => {
      if (key === "length" || key >= newValue) {
        deps.push(dep);
      }
    });
  }
  //其他的情況獲取之前在getter收集的依賴到deps中
  else {
    //將target key 指向的依賴放入deps中
    if (key !== void 0) {
      deps.push(depsMap.get(key));
    }
    //根據(jù)不同type添加不同的必要依賴到deps
    switch (type) {
      //處理添加新的值
      case triggerOpTypes.add:
        if (!isArray(target)) {
          //set或map
          deps.push(depsMap.get(ITERATE_KEY));
          if (isMap(target)) {
            deps.push(depsMap.get(MAP_KEY_ITERATE_KEY));
          }
        } else if (isIntegerKey(key)) {
          //當(dāng)前修改的是數(shù)組且是新增值
          //例如 arr.length = 3 arr[4] = 8
          //此時(shí)數(shù)組長度會(huì)發(fā)生改變所以當(dāng)前數(shù)組的
          //length屬性依然需要被放入依賴
          deps.push(depsMap.get("length"));
        }
        break;
      case triggerOpTypes.delete:
        //處理delete...
        break;
      case triggerOpTypes.set:
        //處理map類型...
    }
  }
  //當(dāng)前effect的信息
  const eventInfo = { target, type, key, newValue, oldValue, oldTarget };
  if (deps.length === 1) {
    if (deps[0]) {
      {
        triggerEffects(deps[0], eventInfo);
      }
    }
  } else {
    const effects = [];
    //扁平化所有的effect
    for (const dep of deps) {
      if (dep) {
        effects.push(...dep);
      }
    }
    //執(zhí)行所有的副作用
    triggerEffects(createDep(effects), eventInfo);
  }
}
//創(chuàng)建dep
export const createDep = (effects) => {
  const dep = new Set(effects);
  dep.w = 0;
  dep.n = 0;
  return dep;
};

//根據(jù)trigger最終組成的deps觸發(fā)所有副作用執(zhí)行
function triggerEffects(dep, debuggerEventExtraInfo) {
  //拿到所有的effects 包裝成數(shù)組
  const effects = isArray(dep) ? dep : [...dep];
  //含有computed屬性先執(zhí)行
  for (const effect of effects) {
    if (effect.computed) {
      triggerEffect(effect, debuggerEventExtraInfo);
    }
  }
  //不含有computed屬性后執(zhí)行
  for (const effect of effects) {
    if (!effect.computed) {
      triggerEffect(effect, debuggerEventExtraInfo);
    }
  }
}
function triggerEffect(effect, debuggerEventExtraInfo) {
  if (effect !== activeEffect || effect.allowRecurse) {
    //生命周期,對(duì)于這個(gè)effect在進(jìn)行trigger的時(shí)候調(diào)用
    if (effect.onTrigger) {
      effect.onTrigger(shared.extend({ effect }, debuggerEventExtraInfo));
    }
    //如果有調(diào)度器則執(zhí)行調(diào)度器否則執(zhí)行run
    if (effect.scheduler) {
      effect.scheduler();
    } else {
      effect.run();
    }
  }
}

//處理刪除屬性的邏輯(統(tǒng)一處理)
//target:要?jiǎng)h除屬性的對(duì)象 key:要?jiǎng)h除對(duì)象值的鍵
export function deleteProperty(target, key) {
  const hadKey = hasOwn(target, key); //判斷刪除的屬性是否在
  const oldValue = target[key]; //獲得舊值
  //刪除屬性返回值為是否刪除成功
  const result = Reflect.deleteProperty(target, key);
  if (result && hadKey) {
    //觸發(fā)副作用
    trigger(target, triggerOpTypes.delete, key, undefined, oldValue);
  }
  return result;
}

//將target key 指向的依賴放入deps中
    if (key !== void 0) {
      deps.push(depsMap.get(key));
}
//省略部分代碼...
case triggerOpTypes.delete:
  if (!isArray(target)) {
    //添加key為iterate的依賴,后面講這個(gè)依賴來自于哪里
    deps.push(depsMap.get(ITERATE_KEY));
    if (isMap(target)) {
      deps.push(depsMap.get(MAP_KEY_ITERATE_KEY));
    }
}
break;
//省略部分代碼...

const {reactive,effect} = require('./reactivity.cjs')
const proxy = reactive({a:1})
effect(()=>{
    Object.keys(proxy)
    console.log(111)
})
effect(()=>{
    proxy.a
    console.log(111)
})
delete proxy.a
//log: 111 111 111 111 

//攔截Object.keys getOwnPropertyNames等
export function ownKeys(target) {
  track(target, "iterate", isArray(target) ? "length" : ITERATE_KEY);
  return Reflect.ownKeys(target);
}

//攔截foo in proxy foo in Object.create(proxy)
//with(proxy){foo} Reflect.has
export function has(target, key) {
  const result = Reflect.has(target, key); //判斷是否有這個(gè)屬性
  //不是Symbol或內(nèi)置Symbol屬性
  if (!isSymbol(key) || !builtInSymbols.has(key)) {
    track(target, "has", key);
  }
  return result;
}