vue3源码分析reactivity实现原理

//设置响应式对象
const proxy = reactive({a:1})
//当proxy.a发生变化的时候,调用effect中的回调函数
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();//第一次立刻执行副作用函数
}
//存放副作用的类
class reactiveeffect {
  constructor(fn, scheduler) {
    this.fn = fn;
    this.scheduler = scheduler;//调度器
  }
  run() {
    try {
      //执行之前先修改activeeffect
      activeeffect = this;
      return this.fn();
    } finally {
      //执行完设置activeeffect为null
      activeeffect = null;
    }
  }
}

function reactive(obj) {
  //获取值的时候收集依赖
  const getter = function (object, key, receiver) {
    const res = reflect.get(object, key, receiver); //获取真实的值
    track(object, key, res);
    if (typeof res === "object") {
      return reactive(res);
    }
    return res;
  };
  //当设置值的时候触发依赖
  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) {
  //首先看看之前是否有这个对象的depsmap
  //如果没有表示是第一次收集创建一个new map
  let depsmap = reactivemap.get(object);
  if (!depsmap) {
    reactivemap.set(object, (depsmap = new map()));
  }
  //如果是第一次收集这个key,则创建一个新的dep依赖
  let dep = depsmap.get(key);
  if (!dep) {
    depsmap.set(key, (dep = new set()));
  }
  找到这个target和key对应的依赖之后进行副作用收集
  trackeffects(dep);
}
function trackeffects(dep) {
  //因为设置的对象是响应式的所以只要
  //响应式对象改变都会收集,但是只有
  //在effect执行的时候activeeffect才有值
  //才能收集到依赖并且dep采用了集合防止
  //重复收集同一个依赖
  if (activeeffect) {
    dep.add(activeeffect);
  }
}
//当修改值的时候触发依赖函数
function trigger(object, key, newval, oldval) {
  const depsmap = reactivemap.get(object);
  const dep = depsmap.get(key);//找到target和key对应的dep
  //执行依赖函数
  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;
  }
}

//设置响应式
const proxy = reactive({ a: 1, b: { a: 1 } });
//设置计算属性
const comp = computed(() => {
  return proxy.a + 1;
});
effect(() => {
  console.log(comp.value);
});
//当proxy.a发生变化,读取comp的value也会发生变化,并且因为comp是响应式
//在effect中被收集了,所以当proxy.a发生变化也会导致effect中的函数执行
proxy.a++;

class computedrefimpl {
  constructor(getter) {
    //调度器
    this._effect = new reactiveeffect(getter, () => {
      if (!this._dirty) {
        this._dirty = true;
        //修改了getter中监听到的值
        //引起对dep内的更新
        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返回已经被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
) {
  //不能够代理非对象
  if (!isobject(target)) {
    {
      console.warn(`value cannot be made reactive: ${string(target)}`);
    }
    return target;
  }
  //已经代理过的对象不需要在进行二次代理
  if (target[raw] && !(isreadonly && target[is_reactive])) {
    return target;
  }
  //防止重复代理
  const existingproxy = proxymap.get(target);
  if (existingproxy) {
    return existingproxy;
  }
  //获取当前被代理对象的类型
  //为0表示被代理对象为不可拓展对象
  //或者当前对象含有__v_skip属性
  //为1表示array,object类型用basehandlers处理
  //为2表示map set weakmap weakset 用collectionhandlers处理
  const targettype = gettargettype(target);
  //不可代理 返回原对象
  if (targettype === 0) {
    console.warn(`current target:${target} can not been proxy!`);
    return target;
  }
  //进行代理
  const proxy = new proxy(
    target,
    //判断当前代理对象的类型,如果是array object采用basehandlers
    //如果是map set weakmap weakset采用collectionhandlers
    targettype === 2 ? collectionhandlers : basehandlers
  );
  proxymap.set(target, proxy);
  //返回代理成功的对象
  return proxy;
}

//如果对象带有__v_skip或则对象不可拓展则不可代理
//然后根据类型判断需要哪种函数进行代理
export function gettargettype(value) {
  return value[skip] || !object.isextensible(value)
    ? 0
    : targettypemap(torawtype(value));
}
//对截取的类型判断 如果是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
//这个便是new proxy()中的第二个参数,可以拦截get
//set deleteproperty has ownkeys等进行处理
const mutablehandlers = {
  get,
  set,
  deleteproperty,
  has,
  ownkeys,
};
//处理readonly的proxy handler
const readonlyhandlers = {
  get: readonlyget,
  //对于readonly的handlers不需要set值
  //打印警告,但是不修改值
  set(target, key) {
    {
      warn(
        `set operation on key "${string(key)}" failed: target is readonly.`,
        target
      );
    }
    return true;
  },
  //对于只读属性,不能删除值
  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,
});
//处理只对第一层做只读代理的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);

//创造getter的工厂函数,通过是否是只读和
//是否只代理第一层创造不同的getter函数
export function creategetter(isreadonly = false, shallow = false) {
  //传递进入proxy的get函数
  //例如const obj = {a:2}
  //    const proxy = new proxy(obj,{
  //  get(target,key,receiver){
  //    当通过proxy.a对obj进行访问的时候,会先进入这个函数
  //     返回值将会作为proxy.a获得的值
  //   }
  // })
  return function get(target, key, receiver) {
    //1.对isreadonly isshallow等方法的处理
    //以下前面几个判断都是为了通过一些关键key判断
    //当前的对象是否是被代理的,或者是否是只读的
    //是否是只代理第一层的。
    //假设当前我们的代理是reactive类型
    //如果我们访问__v_isreactive那么返回值应该为true
    //同理访问readonly类型则返回false
    //故而这里取反
    if (key === is_reactive) {
      return !isreadonly;
    }
    //访问__v_isreadonly返回isreadonly真实值即可
    else if (key === is_readonly) {
      return isreadonly;
    }
    //访问__v_isshallow 返回shallow真实值即可
    else if (key === is_shallow) {
      return shallow;
    }
    //当访问__v_raw的时候,根据当前的readonly和shallow属性
    //访问不同的map表,通过map表获得代理前的对象
    else if (
      key === raw &&
      receiver ===
        (isreadonly
          ? shallow
            ? shallowreadonlymap
            : readonlymap
          : shallow
          ? shallowreactivemap
          : reactivemap
        ).get(target)
    ) {
      return target;
    }
    //判断当前target是否是数组
    const targetisarray = isarray(target);
    //如果调用的push pop shift unshift splice includes indexof lastindexof
    //拦截这个方法
    if (!isreadonly && targetisarray && hasown(arrayinstrumentations, key)) {
      return reflect.get(arrayinstrumentations, key, receiver);
    }
    //获取访问的真实值
    const res = reflect.get(target, key, receiver);
    //判断当前访问的key是否是内置的symbol属性或则是否是不需要track的key
    //例如__proto__ , __v_isref , __isvue 如果是这些属性则直接返回
    if (issymbol(key) ? builtinsymbols.has(key) : isnontrackablekeys(key)) {
      return res;
    }
    //如果不是只读属性 开始收集依赖 只读属性不需要收集依赖
    if (!isreadonly) {
      track(target, trackoptypes.get, key);
    }
    //只需要代理一层,不用再进行代理了返回即可
    if (shallow) {
      return res;
    }
    //如果是访问到的value是ref类型,返回res.value
    //访问的是数组的数字属性则返回res
    if (isref(res)) {
      return targetisarray && isintegerkey(key) ? res : res.value;
    }
    //如果得到的结果依然是对象继续进行深度代理
    if (isobject(res)) {
      return isreadonly ? readonly(res) : reactive(res);
    }
    return res;
  };
}

//这里贴上源码,感兴趣的仔细阅读,不在进行讲解
const isnontrackablekeys = makemap(`__proto__,__v_isref,__isvue`);
function makemap(str, expectslowercase) {
  const map = object.create(null); //创造一个空对象
  const list = str.split(","); //["__proto__","__isvue__"]
  for (let i = 0; i < list.length; i++) {
    map[list[i]] = true;
    //{"__proto__":true,"__isvue__":true}
  }
  //返回一个函数,用于判断是否是传递的str分割出来的某一个值
  //可以通过expectslowercase指定是否需要将分隔值转化为小写
  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)
);

//当前代理的对象是数组,且访问了pop等8个方法中的一个
if (!isreadonly && targetisarray && hasown(arrayinstrumentations, key)) {
      //进行代理
      return reflect.get(arrayinstrumentations, key, receiver);
}
const arrayinstrumentations = createarrayinstrumentations();
function createarrayinstrumentations() {
  const instrumentations = {};
  //拦截数组的方法 arr.includes()
  ["includes", "indexof", "lastindexof"].foreach((key) => {
    instrumentations[key] = function (...args) {
      //这里的this指向调用当前方法的数组
      const arr = toraw(this);
      //将当前数组中的所有元素收集依赖
      for (let i = 0, l = this.length; i < l; i++) {
        track(arr, trackoptypes.get, i + "");
      }
      //执行函数
      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变为false
      pausetracking();
      //这里toraw是为了防止二次执行getter,执行数组对应的方法
      const res = toraw(this)[key].apply(this, args);
      //重新收集依赖,将shouldtrack变为true
      resettracking();
      return res;
    };
  });
  return instrumentations;
}
//中断追踪
export function pausetracking() {
  trackstack.push(shouldtrack);
  shouldtrack = false;
}
//重设追踪
export function resettracking() {
  //获取之前的shouldtrack值
  const last = trackstack.pop();
  //如果trackstack中没有值shouldtrack设置为true
  shouldtrack = last === undefined ? true : last;
}

export function track(target, type, key) {
  //当调用了effect方法,会给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()));
    }
    //传递入生命周期钩子的当前effect的信息
    const eventinfo = { effect: activeeffect, target, type, key };
    trackeffects(dep, eventinfo);
  }
}

export class reactiveeffect {
  constructor(fn, scheduler = null, scope) {
    this.fn = fn; //副作用函数
    //调度器(如果有调用器就不在执行run方法而是执行调度器)
    this.scheduler = scheduler;
    this.active = true;
    /**
     * 当前副作用被那些变量所依赖
     * 例如:
     *  effect(()=>{
     *   console.log(proxy.a)
     *  })
     *  effect(()=>{
     *   console.log(proxy.a)
     *  })
     *
     *  每一个effect的回调函数都会产生一个reactiveeffect实例
     *  第一个effect中有proxy.a被读取,那么就会被收集依赖,则
     *  对于第一个reactiveeffect实例来说deps中就有有proxy.a
     *  也就是target key 指向的dep,这个dep是一个集合,代表的是
     *  target key对应的dep
     */
    this.deps = [];
    this.parent = undefined;
    //todo recordeffectscope
    recordeffectscope(this, scope);
  }
  //开始执行
  run() {
    if (!this.active) {
      return this.fn();
    }
    let parent = activeeffect;
    let lastshouldtrack = shouldtrack;
    while (parent) {
      if (parent === this) {
        return;
      }
      parent = parent.parent;
    }
    try {
      //可能有嵌套的effect,当执行到effect回调函数中有effect的时候
      //现在的activeeffect相当于最新创建的effect的父级effect
      /*
        例如:effect(()=>{
            现在指向外部的effect
            console.log(proxy.a)
            effect(()=>{
              在这里面的时候activeeffect指向内部effect
              console.log(proxy.b)
            })
            现在需要将activeeffect恢复为外部effect
            console.log(proxy.b)
        })
        当然对应的parent也应该改变,这就是try finally的作用
      */
      this.parent = activeeffect;
      //让当前的activeeffect为当前effect实例
      activeeffect = this;
      shouldtrack = true;
      //设置嵌套深度
      trackopbit = 1 << ++effecttrackdepth;
      if (effecttrackdepth <= maxmarkerbits) {
        initdepmarkers(this);
      } else {
        cleanupeffect(this);
      }
      //执行effect副作用
      return this.fn();
    } finally {
      //退出当前effect回调函数的执行,要将全局变量退回到当前
      //effect的父级effect(回溯)
      if (effecttrackdepth <= maxmarkerbits) {
        finalizedepmarkers(this);
      }
      //全部进行回溯
      trackopbit = 1 << --effecttrackdepth; //恢复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 {
    //如果已经收集过就不收集了
    shouldtrack = !dep.has(activeeffect);
  }
  //通过上面的判断是否需要收集
  if (shouldtrack) {
    //往当前target key对应的dep中添加effect
    dep.add(activeeffect);
    //当前effect中有哪些被代理的变量的dep
    activeeffect.deps.push(dep);
    //生命周期,当真正执行track的时候调用函数
    if (activeeffect.ontrack) {
      activeeffect.ontrack({
        effect: activeeffect,
        ...debuggereventextrainfo,
      });
    }
  }
}

//创造setter的工厂函数
export function createsetter(shallow) {
  return function set(target, key, value, receiver) {
    let oldvalue = target[key]; //获取代理对象之前的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是对象且值为ref类型,当对这个值修改的时候应该修改ref.value
      if (!isarray(target) && isref(oldvalue) && !isref(value)) {
        oldvalue.value = value;
        return true;
      }
    }
    //判断当前访问的key是否存在,不存在则是设置新的值
    const hadkey =
      //当前的target为数组且访问的是数字
      isarray(target) && isintegerkey(key)
        ? number(key) < target.length
        : hasown(target, key);
    //设置value
    const result = reflect.set(target, key, value, receiver);
    if (target === toraw(receiver)) {
      //设置新的值
      if (!hadkey) {
        trigger(target, triggeroptypes.add, key, value);
      }
      //修改老的值
      else if (haschanged(value, oldvalue)) {
        trigger(target, triggeroptypes.set, key, value, oldvalue);
      }
    }
    return result;
  };
}

//根据不同的类型添加必要的副作用到deps中
export function trigger(target, type, key, newvalue, oldvalue, oldtarget) {
  const depsmap = targetmap.get(target);
  if (!depsmap) {
    return;
  }
  let deps = []; //当前要处理的所有依赖
  if (type === triggeroptypes.clear) {
    //清空,相当于所有的元素都发生改变
    //故而全部都需要添加进依赖
    deps = [...depsmap.values()];
  }
  //拦截修改数组长度的情况
  else if (key === "length" && isarray(target)) {
    //放入key为length或者数组下标大于设置值的所以依赖
    //例如:const a = [1,2,3] a.length=1
    //那么数组长度发生了变化,2,3的依赖都应该被放入
    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));
    }
    //根据不同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)) {
          //当前修改的是数组且是新增值
          //例如 arr.length = 3 arr[4] = 8
          //此时数组长度会发生改变所以当前数组的
          //length属性依然需要被放入依赖
          deps.push(depsmap.get("length"));
        }
        break;
      case triggeroptypes.delete:
        //处理delete...
        break;
      case triggeroptypes.set:
        //处理map类型...
    }
  }
  //当前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);
      }
    }
    //执行所有的副作用
    triggereffects(createdep(effects), eventinfo);
  }
}
//创建dep
export const createdep = (effects) => {
  const dep = new set(effects);
  dep.w = 0;
  dep.n = 0;
  return dep;
};

//根据trigger最终组成的deps触发所有副作用执行
function triggereffects(dep, debuggereventextrainfo) {
  //拿到所有的effects 包装成数组
  const effects = isarray(dep) ? dep : [...dep];
  //含有computed属性先执行
  for (const effect of effects) {
    if (effect.computed) {
      triggereffect(effect, debuggereventextrainfo);
    }
  }
  //不含有computed属性后执行
  for (const effect of effects) {
    if (!effect.computed) {
      triggereffect(effect, debuggereventextrainfo);
    }
  }
}
function triggereffect(effect, debuggereventextrainfo) {
  if (effect !== activeeffect || effect.allowrecurse) {
    //生命周期,对于这个effect在进行trigger的时候调用
    if (effect.ontrigger) {
      effect.ontrigger(shared.extend({ effect }, debuggereventextrainfo));
    }
    //如果有调度器则执行调度器否则执行run
    if (effect.scheduler) {
      effect.scheduler();
    } else {
      effect.run();
    }
  }
}

//处理删除属性的逻辑(统一处理)
//target:要删除属性的对象 key:要删除对象值的键
export function deleteproperty(target, key) {
  const hadkey = hasown(target, key); //判断删除的属性是否在
  const oldvalue = target[key]; //获得旧值
  //删除属性返回值为是否删除成功
  const result = reflect.deleteproperty(target, key);
  if (result && hadkey) {
    //触发副作用
    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的依赖,后面讲这个依赖来自于哪里
    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); //判断是否有这个属性
  //不是symbol或内置symbol属性
  if (!issymbol(key) || !builtinsymbols.has(key)) {
    track(target, "has", key);
  }
  return result;
}