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 reactive(target) {
  //如果被代理的是readonly返回已經(jīng)被readonly代理過(guò)的target
  if (isReadonly(target)) {
    return target;
  }
  return createReactiveObject(
    target,
    false,
    mutableHandlers,
    mutableCollectionHandlers,
    reactiveMap
  );
}

const mutableCollectionHandlers = {
  get: createInstrumentationGetter(false, false),
};
const shallowCollectionHandlers = {
  get: createInstrumentationGetter(false, true),
};
const readonlyCollectionHandlers = {
  get: createInstrumentationGetter(true, false),
};
const shallowReadonlyCollectionHandlers = {
  get: createInstrumentationGetter(true, true),
};

function createInstrumentationGetter(isReadonly, shallow) {
  const instrumentations = shallow
    ? isReadonly
      ? shallowReadonlyInstrumentations
      : shallowInstrumentations
    : isReadonly
    ? readonlyInstrumentations
    : mutableInstrumentations;
  return (target, key, receiver) => {
    //對(duì)于map set的代理同樣需要添加
    if (key === IS_REACTIVE) {
      return !isReadonly;
    } else if (key === IS_READONLY) {
      return isReadonly;
    } else if (key === RAW) {
      return target;
    }
    //通過(guò)之前生成的攔截方法進(jìn)行調(diào)度
    return Reflect.get(
      hasOwn(instrumentations, key) && key in target
        ? instrumentations
        : target,
      key,
      receiver
    );
  };
}

//通過(guò)攔截map set的方法實(shí)現(xiàn)代理
export function createInstrumentations() {
  const mutableInstrumentations = {
  };
  const shallowInstrumentations = {
  };
  const readonlyInstrumentations = {
  };
  const shallowReadonlyInstrumentations = {
  };
  //其中keys,values,entries,Symbol.iterator是通過(guò)
  //迭代器運(yùn)行的,需要進(jìn)行攔截
  const iteratorMethods = ["keys", "values", "entries", Symbol.iterator];
  iteratorMethods.forEach((method) => {
    mutableInstrumentations[method] = createIterableMethod(
      method,
      false,
      false
    );
    readonlyInstrumentations[method] = createIterableMethod(
      method,
      true,
      false
    );
    shallowInstrumentations[method] = createIterableMethod(method, false, true);
    shallowReadonlyInstrumentations[method] = createIterableMethod(
      method,
      true,
      true
    );
  });
  return [
    mutableInstrumentations,
    readonlyInstrumentations,
    shallowInstrumentations,
    shallowReadonlyInstrumentations,
  ];
}

 const mutableInstrumentations = {
    get(key) {
      return get(this, key);
    },
    get size() {
      return size(this);
    },
    has: has,
    add,
    set: set,
    delete: deleteEntry,
    clear,
    forEach: createForEach(false, false),
};

//代理map set weakMap weakSet的get方法
function get(target, key, isReadonly = false, isShallow = false) {
  target = target[RAW];
  //因?yàn)閙ap的key可以是對(duì)象,所以需要rawKey
  //同時(shí)收集依賴必須要rawTarget
  const rawTarget = toRaw(target);
  const rawKey = toRaw(key);
  if (!isReadonly) {
    /**
     * 為了實(shí)現(xiàn)在effect函數(shù)中無(wú)論是使用了以proxyKey
     * 還是以rawKey為鍵進(jìn)行收集的依賴,在effect外部
     * 修改proxyMap的proxyKey或rawKey都能觸發(fā)依賴
     * 更新,當(dāng)使用proxyKey為鍵時(shí),需要進(jìn)行兩次track
     * 例如:當(dāng)前在effect中獲取的是proxyKey那么進(jìn)行
     * 兩次track,在depsMap中就會(huì)有兩個(gè)entries,分別
     * 是以rawKey和proxyKey指向的deps但是指向的deps
     * 不改變 那么在set中修改值的時(shí)候,無(wú)論是修改的
     * proxyKey還是rawKey都能在depsMap中找到正確的
     * 依賴進(jìn)行更新
     */
    if (key !== rawKey) {
      track(rawTarget, trackOpTypes.get, key);
    }
    track(rawTarget, trackOpTypes.get, rawKey);
  }
  const { has } = getProto(rawTarget);
  const wrap = isShallow ? toShallow : isReadonly ? toReadonly : toReactive;
  //無(wú)論是使用rawKey還是key都能讀取到
  if (has.call(rawTarget, key)) {
    //僅需進(jìn)行代理,并且返回代理后的對(duì)象
    return wrap(target.get(key));
  } else if (has.call(rawTarget, rawKey)) {
    return wrap(target.get(rawKey));
  } else if (target !== rawTarget) {
    target.get(key);
  }
}

//對(duì)map set的size屬性的攔截
function size(target, isReadonly = false) {
  target = target[RAW];
  !isReadonly && track(toRaw(target), trackOpTypes.iterate, ITERATE_KEY);
  return Reflect.get(target, trackOpTypes.size, target);
}

//has進(jìn)行依賴收集
function has(key, isReadonly = false) {
  const target = this[RAW];//獲取代理前的對(duì)象
  const rawTarget = toRaw(target);
  const rawKey = toRaw(key);//獲取代理前的key
  if (!isReadonly) {
    //這里執(zhí)行兩次track的原因和上面相同
    if (key !== rawKey) {
      //收集依賴,類型為"has"
      track(rawTarget, trackOpTypes.has, key);
    }
    track(rawTarget, trackOpTypes.has, rawKey);
  }
  return key === rawKey
    ? target.has(key)
    : target.has(key) || target.has(rawKey);
}

//對(duì)set的add方法的攔截
function add(value) {
  value = toRaw(value); //獲取rawValue
  const target = toRaw(this); //獲取rawTarget
  const proto = getProto(target);
  //如果不存在這個(gè)值則是修改進(jìn)行trigger
  const hadKey = proto.has.call(target, value);
  if (!hadKey) {
    target.add(value);
    trigger(target, triggerOpTypes.add, value, value);
  }
  return this;
}

case triggerOpTypes.add:
 if (!isArray(target)) {
   //map weakMap object
   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ù)組長(zhǎng)度會(huì)發(fā)生改變所以當(dāng)前數(shù)組的
   //length屬性依然需要被放入依賴
   deps.push(depsMap.get("length"));
}
break;

//這里的key可能是rawKey 也可能是proxyKey
function set(key, value) {
  value = toRaw(value); //獲取原始的value值
  const target = toRaw(this); //獲取原始的target
  const { has, get } = getProto(target);
  //判斷當(dāng)前使用的key能否獲得值
  let hadKey = has.call(target, key);
  //獲取不到可能是proxyKey,轉(zhuǎn)化為rawKey再試試
  if (!hadKey) {
    key = toRaw(key);
    hadKey = has.call(target, key);
  } else {
    checkIdentityKeys(target, has, key);
  }
  //通過(guò)key獲取
  const oldValue = get.call(target, key);
  //設(shè)置
  target.set(key, value);
  //rawKey和proxyKey都獲取不到則是添加屬性
  if (!hadKey) {
    //觸發(fā)更新
    trigger(target, triggerOpTypes.add, key, value);
  }
  //修改屬性
  else if (hasChanged(value, oldValue)) {
    trigger(target, triggerOpTypes.set, key, value, oldValue);
  }
  return this;
}

function deleteEntry(key) {
  const target = toRaw(this);
  const { has, get } = getProto(target);
  //刪除的key可能是proxyKey也可能是rawKey
  //所以需要判斷,判斷的時(shí)候時(shí)候需要使用has
  //方法,所以需要對(duì)target還原,實(shí)際上所有的
  //操作都不能使用receiver,會(huì)造成二次依賴觸發(fā)
  let hadKey = has.call(target, key);
  if (!hadKey) {
    key = toRaw(key);
    hadKey = has.call(target, key);
  } else {
    checkIdentityKeys(target, has, key);
  }
  const oldValue = get ? get.call(target, key) : undefined;
  const result = target.delete(key);
  //刪除觸發(fā)更新
  if (hadKey) {
    trigger(target, triggerOpTypes.delete, key, undefined, oldValue);
  }
  return result;
}
function clear() {
  const target = toRaw(this);
  const hadItems = target.size !== 0;
  //執(zhí)行clear后 數(shù)據(jù)會(huì)被全部清空,oldTarget將不再存在
  //所以需要淺克隆保證舊數(shù)據(jù)依然能進(jìn)入trigger
  const oldTarget = isMap(target) ? new Map(target) : new Set(target);
  const result = target.clear();
  if (hadItems) {
    trigger(target, triggerOpTypes.clear, undefined, undefined, oldTarget);
  }
  return result;
}

//clear
if (type === triggerOpTypes.clear) {
  //清空,相當(dāng)于所有的元素都發(fā)生改變
  //故而全部都需要添加進(jìn)依賴
  deps = [...depsMap.values()];
}
//delete
case triggerOpTypes.delete:
   if (!isArray(target)) {
    deps.push(depsMap.get(ITERATE_KEY));
    if (isMap(target)) {
       deps.push(depsMap.get(MAP_KEY_ITERATE_KEY));
    }
   }
break;

function createForEach(isReadonly, isShallow) {
  return function forEach(callback, thisArg) {
    const observed = this;
    const target = observed["__v_raw" /* ReactiveFlags.RAW */];
    const rawTarget = toRaw(target);
    const wrap = isShallow ? toShallow : isReadonly ? toReadonly : toReactive;
    !isReadonly &&
      track(rawTarget, "iterate" /* TrackOpTypes.ITERATE */, ITERATE_KEY);
    return target.forEach((value, key) => {
      return callback.call(thisArg, wrap(value), wrap(key), observed);
    });
  };
}

const shallowInstrumentations = {
    get(key) {
      return get(this, key, false, true);
    },
    get size() {
      return size(this);
    },
    has: has,
    add,
    set: set,
    delete: deleteEntry,
    clear,
    forEach: createForEach(false, true),
};

 const readonlyInstrumentations = {
    get(key) {
      return get$1(this, key, true);
    },
    get size() {
      return size(this, true);
    },
    has(key) {
      return has.call(this, key, true);
    },
    //只讀的屬性是不需要修改的,全部通過(guò)warn提示
    add: createReadonlyMethod(triggerOpTypes.add),
    set: createReadonlyMethod(triggerOpTypes.set),
    delete: createReadonlyMethod(triggerOpTypes.delete),
    clear: createReadonlyMethod(triggerOpTypes.clear),
    forEach: createForEach(true, false),
  };
function createReadonlyMethod(type) {
  return function (...args) {
    {
      const key = args[0] ? `on key "${args[0]}" ` : ``;
      console.warn(
        `${shared.capitalize(
          type
        )} operation ${key}failed: target is readonly.`,
        toRaw(this)
      );
    }
    return type === triggerOpTypes.delete ? false : this;
  };
}

const shallowReadonlyInstrumentations = {
    get(key) {
      return get(this, key, true, true);
    },
    get size() {
      return size(this, true);
    },
    has(key) {
      return has.call(this, key, true);
    },
    //只讀的屬性是不需要修改的,全部通過(guò)warn提示
    add: createReadonlyMethod(triggerOpTypes.add),
    set: createReadonlyMethod(triggerOpTypes.set),
    delete: createReadonlyMethod(triggerOpTypes.delete),
    clear: createReadonlyMethod(triggerOpTypes.clear),
    forEach: createForEach(true, true),
  };

function createIterableMethod(method, isReadonly, isShallow) {
  return function (...args) {
    const target = this[RAW];
    const rawTarget = toRaw(target);
    const targetIsMap = isMap(rawTarget); //被代理對(duì)象是否是map
    //如果是entries方法,會(huì)返回key和value
    const isPair =
      method === "entries" || (method === Symbol.iterator && targetIsMap);
    const isKeyOnly = method === "keys" && targetIsMap;
    //調(diào)用這個(gè)方法,返回迭代器
    const innerIterator = target[method](...args);
    //獲取當(dāng)前需要代理的函數(shù)
    const wrap = isShallow ? toShallow : isReadonly ? toReadonly : toReactive;
    //readonly不需要track
    !isReadonly &&
      //追蹤
      track(
        rawTarget,
        trackOpTypes.iterate,
        //如果是Map且訪問(wèn)的keys方法則是MAP_KEY_ITERATE_KEY
        isKeyOnly ? MAP_KEY_ITERATE_KEY : ITERATE_KEY
      );
    return {
      //重寫(xiě)迭代器方法 key,value還可以被深度代理
      next() {
        const { value, done } = innerIterator.next();
        return done
          ? { value, done }
          : {
              //如果是entries方法value則是key和value
              value: isPair ? [wrap(value[0]), wrap(value[1])] : wrap(value),
              done,
            };
      },
      [Symbol.iterator]() {
        return this;
      },
    };
  };
}

//判斷當(dāng)前r是否是ref
function isRef(r) {
    //根本就是判斷當(dāng)前對(duì)象上是否有__v_isRef屬性
    return !!(r && r.__v_isRef === true);
}
function ref(value) {
    //創(chuàng)建ref的工廠函數(shù),第二個(gè)參數(shù)為是為為shallow
    return createRef(value, false);
}
function shallowRef(value) {
    //第二個(gè)參數(shù)為true表示當(dāng)前是shallow
    return createRef(value, true);
}
//如果是ref則返回ref,只對(duì)非ref進(jìn)行代理
function createRef(rawValue, shallow) {
    if (isRef(rawValue)) {
        return rawValue;
    }
    return new RefImpl(rawValue, shallow);
}

class RefImpl {
    constructor(value, __v_isShallow) {
        //是否由shallowRef創(chuàng)建
        this.__v_isShallow = __v_isShallow;
        //這個(gè)dep和target,key對(duì)應(yīng)的dep是一個(gè)意思
        //可以理解為target = this;key="value"對(duì)應(yīng)的dep
        this.dep = undefined;
        this.__v_isRef = true;//是否是ref
        //未代理的value
        this._rawValue = __v_isShallow ? value : toRaw(value);
        //代理過(guò)后的value
        this._value = __v_isShallow ? value : toReactive(value);
    }
    get value() {
        //收集所有的依賴
        trackRefValue(this);
        return this._value;
    }
    set value(newVal) {
        //是否還需要進(jìn)行深度代理
        const useDirectValue = this.__v_isShallow || isShallow(newVal) || isReadonly(newVal);
        newVal = useDirectValue ? newVal : toRaw(newVal);
        //如果當(dāng)前值發(fā)生了修改相當(dāng)于Object.is
        if (shared.hasChanged(newVal, this._rawValue)) {
            this._rawValue = newVal;
            this._value = useDirectValue ? newVal : toReactive(newVal);
            //觸發(fā)依賴更新
            triggerRefValue(this, newVal);
        }
    }
}
//兩個(gè)工具函數(shù)
const toReactive = (value) => shared.isObject(value) ? reactive(value) : value;
const toReadonly = (value) => shared.isObject(value) ? readonly(value) : value;

function trackRefValue(ref) {
  //判斷當(dāng)前activeEffect是否存在不存在則不需要收集依賴
  if (shouldTrack && activeEffect) {
    ref = toRaw(ref);
    //收集target為ref key為"value"的依賴
    trackEffects(ref.dep || (ref.dep = createDep()), {
         target: ref,//target相當(dāng)于ref
         type: "get",//類型是"get"
         key: 'value'//key是"value"
       });
    }
}
function triggerRefValue(ref, newVal) {
 ref = toRaw(ref);
 if (ref.dep) {   
   //觸發(fā)target為ref key為"value"的依賴
   triggerEffects(ref.dep, {
     target: ref,
     type: "set" /* TriggerOpTypes.SET */,
     key: 'value',
     newValue: newVal
   });     
 }
}

const proxy = reactive({a:1,b:2})
const {a,b} = proxy //失效

const proxy = reactive({a:{a:1},b:{b:1}})
const {a,b} = proxy //a,b依然是響應(yīng)式的

function toRefs(object) {
    //如果不是代理過(guò)的對(duì)象,不能使用toRefs
    if (!isProxy(object)) {
        console.warn(`toRefs() expects a reactive object but received a plain one.`);
    }
    //創(chuàng)建容器
    const ret = isArray(object) ? new Array(object.length) : {};
    //將解構(gòu)后的值變?yōu)轫憫?yīng)式賦值給ret容器
    for (const key in object) {
        toRef返回ObjectRefImpl實(shí)例返回一個(gè)對(duì)象
        ret[key] = toRef(object, key);
    }
    return ret;
}
//將代理的值變?yōu)閞ef
function toRef(object, key, defaultValue) {
    const val = object[key];
    return isRef(val)
        ? val
        : new ObjectRefImpl(object, key, defaultValue);
}
//ObjectRefImpl實(shí)例訪問(wèn)value的時(shí)候相當(dāng)于是
//訪問(wèn)的proxy[key]這樣就依舊是響應(yīng)式的
//同理設(shè)置的時(shí)候proxy[key] = xxx也是響應(yīng)式的
//我們只需要訪問(wèn).value和設(shè)置.value就可以了
class ObjectRefImpl {
  constructor(_object, _key, _defaultValue) {
    //存儲(chǔ)proxy
    this._object = _object;
    //存儲(chǔ)key
    this._key = _key;
    this._defaultValue = _defaultValue;
    this.__v_isRef = true;//當(dāng)前是ref
  }
  get value() {
    //this._object[this._key]相當(dāng)于讀取了proxy中的值
    //會(huì)收集依賴
    const val = this._object[this._key];
    return val === undefined ? this._defaultValue : val;
  }
  set value(newVal) {
    //設(shè)置了proxy中的值觸發(fā)依賴更新
    this._object[this._key] = newVal;
  }
}

//對(duì)傳遞的參數(shù)進(jìn)行整理生成ComputedRefImpl實(shí)例并返回
function computed(getterOrOptions, debugOptions, isSSR = false) {
    let getter;
    let setter;
    //第一個(gè)參數(shù)是函數(shù),則只有g(shù)etter沒(méi)有setter
    const onlyGetter = shared.isFunction(getterOrOptions);
    if (onlyGetter) {
        getter = getterOrOptions;
        setter = () => {
           console.warn('Write operation failed: computed value is readonly');
        };
    }
    else {
        //獲取getter和setter
        //getter返回一個(gè)計(jì)算值
        //如果setter存在當(dāng)修改ComputedRefImpl實(shí)例的value屬性
        //的時(shí)候會(huì)調(diào)用setter并把修改的值傳遞到setter中
        getter = getterOrOptions.get;
        setter = getterOrOptions.set;
    }
    //創(chuàng)建實(shí)例
    const cRef = new ComputedRefImpl(getter, setter, onlyGetter || !setter, isSSR);
    if (debugOptions && !isSSR) {
        cRef.effect.onTrack = debugOptions.onTrack;
        cRef.effect.onTrigger = debugOptions.onTrigger;
    }
    return cRef;
}

_a = "__v_isReadonly"
class ComputedRefImpl {
    constructor(getter, _setter, isReadonly, isSSR) {
        this._setter = _setter;
        this.dep = undefined;
        this.__v_isRef = true;
        this[_a] = false;
        this._dirty = true;
        //這里的邏輯reactivity上篇中已經(jīng)講過(guò)了
        this.effect = new ReactiveEffect(getter, () => {
            if (!this._dirty) {
                this._dirty = true;
                triggerRefValue(this);
            }
        });
        //在trigger中優(yōu)先觸發(fā)有computed屬性的effect
        this.effect.computed = this;
        this.effect.active = this._cacheable = !isSSR;
        this["__v_isReadonly"] = isReadonly;
    }
    get value() {
        const self = toRaw(this);
        trackRefValue(self);
        if (self._dirty || !self._cacheable) {
            self._dirty = false;
            self._value = self.effect.run();
        }
        return self._value;
    }
    set value(newValue) {
        this._setter(newValue);
    }
}

//customRef的實(shí)現(xiàn)
function customRef(factory) {
    return new CustomRefImpl(factory);
}
class CustomRefImpl {
    constructor(factory) {
        this.dep = undefined;
        this.__v_isRef = true;
        const { get, set } = factory(
         () => trackRefValue(this), 
         () => triggerRefValue(this)
        );
        this._get = get;
        this._set = set;
    }
    get value() {
        return this._get();
    }
    set value(newVal) {
        this._set(newVal);
    }
}

function deferredComputed(getter) {
    return new DeferredComputedRefImpl(getter);
}
class DeferredComputedRefImpl {
 constructor(getter) {
  this.dep = undefined;
  this._dirty = true;
  this.__v_isRef = true;
  this[_a] = true;
  let compareTarget;
  let hasCompareTarget = false;
  let scheduled = false;
  this.effect = new ReactiveEffect(getter, (computedTrigger) => {
   if (this.dep) {
    if (computedTrigger) {
      compareTarget = this._value;
      hasCompareTarget = true;
    }
    else if (!scheduled) {
      const valueToCompare = hasCompareTarget ? compareTarget : this._value;
      scheduled = true;
      hasCompareTarget = false;
      scheduler(() => {
       if (this.effect.active && this._get() !== valueToCompare) {
           triggerRefValue(this);
       }
       scheduled = false;
      });
     }          
     for (const e of this.dep) {
       if (e.computed instanceof DeferredComputedRefImpl) {
         e.scheduler(true);
       }
     }
    }
    this._dirty = true;
  });
  this.effect.computed = this;
 }
 _get() {
   if (this._dirty) {
     this._dirty = false;
     return (this._value = this.effect.run());
   }
   return this._value;
 }
 get value() {
   trackRefValue(this);
   return toRaw(this)._get();
 }
}
const tick = Promise.resolve();
const queue = [];
let queued = false;
const scheduler = (fn) => {
    queue.push(fn);
    if (!queued) {
        queued = true;
        tick.then(flush);
    }
};
const flush = () => {
    for (let i = 0; i < queue.length; i++) {
        queue[i]();
    }
    queue.length = 0;
    queued = false;
};