从零实现Vue3响应式

依赖收集effect.ts(副作用函数)

• 将模板转换的render函数放置在effect函数内，则实现了数据响应式。

流程简述

1. 通过reactive创建响应式数据
2. 在模板中使用该数据（访问触发Proxy.get），并将该模板转化为render渲染函数置于effect副作用函数中。

      // template => render => effect(render)
      // effect函数*默认*会先执行一次(绑定依赖)。
   

3. 依赖收集：将正在执行的effect函数抛出为全局变量，并在渲染时通过响应式数据的get方法进行依赖收集绑定。
4. effect与响应式对象的属性互成依赖，两者为多对多关系。
   • 一个effect可收集多个属性为依赖。存储对象deps。
   • 一个属性可存在于多个effect中。存储对象weakMap：(对象：map（属性：set(effect)）)。
5. 最后，当响应式数据改变时，根据依赖找到对应的effect函数=>effect(render())执行即可。
6. 全流程均处于同步状态，精心设计利用了单线程进行依赖绑定。

核心：副作用函数effect

• effect -- 副作用函数，如果此函数依赖的数据发生变化，则重新执行该函数（类似computed）

export function effect(fn, options: any = {}) {
  /*
    创建响应式的effect，effect可以根据状态变化，重新执行
    且可以嵌套着写，且可以传入自定义的调度函数[scheduler]，可实现异步更新
  */
  const _effect = new ReactiveEffect(fn, options.scheduler);
  _effect.run(); // 默认先执行一次

  // effect执行完可以重复执行其中的方法 runner._effect.run/stop等，绑定this指向
  const runner = _effect.run.bind(_effect);
  runner._effect = _effect;
  return runner;
}

响应式类 - ReactiveEffect

• 将effect转为响应式（嵌套监听逻辑）

// activeEffect 当前激活的effect函数
// 根据单线程原理可以追踪到每一个effect
export let activeEffect = undefined;

export class ReactiveEffect {
  /**
   * 为实例新增属性
   * public  => this.active = true 默认为激活状态
   *  => this.parent = null 为实例新增父亲[树形结构]，避免嵌套函数回退时，全局属性丢失
   *  => this.deps = []  [分支切换]effect记录keys，记录被谁收集过，当重新执行effect时，要清空上次收集的依赖
   *  => this.scheduler = getters 当用户需要自定义调度时，可以使用scheduler
   */
  public active = true;
  public parent = undefined;
  public deps = []; //
  constructor(public fn, public scheduler?) {}
  run() {
    // 若函数不需要响应式数据，则说明未激活，直接执行函数即可
    if (!this.active) {
      this.fn();
    }
    try {
      // 此时activeEffect为null或者其父亲（当effect嵌套时，要精准绑定响应式数据与effect的关系）
        this.parent = activeEffect;
      // 依赖收集，先改变全局activeEffect值，让渲染函数与依赖关联
      activeEffect = this;
      // 执行effect函数前，要清空上次的依赖
      clearupEffect(this);
      return this.fn();
    } finally {
      activeEffect = this.parent;
    }
  }
  stop() {
    if (this.active) {
      this.active = false;
      clearupEffect(this);
    }
  }
}

// 执行effect函数前，要清空上次的依赖
function clearupEffect(effect) {
  const { deps } = effect;
  for (let i = 0; i < deps.length; i++) {
    // 此时操作的 deps[i] === targetMap.get(target).get(key)
    deps[i].delete(effect); // 调用对应的key删除对应的effect -- [Set]对象引用
  }
  deps.length = 0; // 删除effect中的deps记录
}

依赖绑定函数track

/**
 * 对象[属性]收集函数[多对多]
 *
 * 树形结构targetMap -- 源Map
 *  第一层：以对象为键，Map为值 targetMap.set(target, (depsMap = new Map()))
 *           一个对象[targetMap] -- 多个属性[target]
 *  第二层：以属性为键，Set为值[保证其唯一性]，
 *           一个对象[key] -- 多个属性[Set]
 *
 */
// 弱引用 -- WeakMap键只能是引用类型的对象
// 不会导致内存泄漏，原对象删除时，该引用也删除
const targetMap = new WeakMap(); 
export function track(target, type, key) {
  if (!activeEffect) return; // 全局环境下访问属性值，不做处理
  let depsMap = targetMap.get(target); // 第一次没有
  if (!depsMap) {
    targetMap.set(target, (depsMap = new Map())); // 注入target标识
  }
  let dep = depsMap.get(key); // dep => 属性key对应的唯一值Set对象
  if (!dep) {
    depsMap.set(key, (dep = new Set()));
  }
  // 给当前的dep -- Set对象，绑定effect
  trackEffects(dep);
}

依赖更新执行effect函数trigger

/**
 *
 * trigger 通知effect执行函数
 */

export function trigger(taregt, type, key, value, oldVal) {
  // 获取对象值
  const depsMap = targetMap.get(taregt);
  // 触发的值，不在模板中
  if (!depsMap) return;
  let effects = depsMap.get(key); // 找到属性收集到的effects
  // 通知收集的依赖执行

  if (effects) {
    // 拷贝一份，防止清理与添加的操作同时发生，关联引用
    triggerEffect(effects);
  }
}

封装effect常用逻辑收集、调用

// 封装收集依赖
export function trackEffects(dep) {
  if (activeEffect) {
    let shouldTrack = !dep.has(activeEffect); // 性能优化，由用户判断
    if (shouldTrack) {
      // 为dep对象绑定effect
      dep.add(activeEffect);
      // 反向记录，当effect绑定值被切换时[flag ? state.name : state.age]，通知key值，别更新该effect
      activeEffect.deps.push(dep);
    }
  }
}

// 封装触发effect函数
export function triggerEffect(effects) {
  effects = new Set(effects);
  effects.forEach((effect) => {
    /**
     *  防止effect中再次修改同一属性值[循环引用]
     *  run的时候会删除上一个effects，然后再添加本次执行的deps。
     *  深拷贝一份，解除关联引用。循环数组时，delete和add同时运行，会造成栈溢出。
     */
    if (effect !== activeEffect) {
      if (effect.scheduler) {
        effect.scheduler();
      } else {
        effect.run();
      }
    }
  });
}

数据代理（reactive实现）

代理流程简述

• reactive：将对象代理，并返回代理对象。
• 考虑对象中有访问器、函数，在其中通过this访问对象的属性。
  • 劫持时通过Reflect获取、修改属性，并将Proxy对象传入，改变其this指向为Proxy对象。
  • 保证访问器、函数内的源对象属性访问也能被劫持到。
• 处理已代理过的对象，通过标识符IS_REACTIVE，标识数据是否已代理过
• 若已代理过，则直接返回该对象。
• 细节：
  • 未被代理的对象无该属性拦截。
  • 已被代理的对象在访问器设置了逻辑。
  • 在不新增属性的情况下实现了标识判断。

// 导入值本来应该作为公共导出的，为了方便，下面直接贴上了

// import { isObject } from "@vue/shared"; 
// import { mutableHandle, ReactiveFlags } from "./baseHandle";

// 判断对象是否为响应式对象
export const isReactive = (obj) => {
  return obj && obj[ReactiveFlags.IS_REACTIVE];
};

// 响应式标识
export const enum ReactiveFlags {
  IS_REACTIVE = "__v_isReactive",
}

export const isObject = (example) => {
  return typeof example === "object" && example != null;
};

// 数据拦截核心逻辑 -- new Proxy(mutableHandle)
export const mutableHandle = {
  // 拦截器逻辑
  get(target, key, receiver) {
    /**
      activeEffect ，当响应式数据被访问时，可以监听到，并关联到该渲染函数
      console.log("key", key); 
      为代理对象新增已代理标识
     */
    
    if (key === ReactiveFlags.IS_REACTIVE) {
      return true;
    }
    // 收集依赖函数
    track(target, "get", key);

    /**
     * 懒递归，当访问代理对象A中的值B依旧为对象时，将B代理并返回，且不会重复代理
     * receiver => mutableHandle -- 代理对象
     * 监控代理对象获取值，Reflect 可以改变对象中的访问器this指向，指向代理对象receiver
     *
     */
    let res = Reflect.get(target, key, receiver);
    if (isObject(res)) {
      return reactive(res);
    }
    return res;
  },
  set(target, key, value, receiver) {
    // 通知更新
    let oldVal = target[key];
    let result = Reflect.set(target, key, value, receiver);
    if (oldVal != result) {
      trigger(target, "set", key, value, oldVal);
    }

    // target指向源对象，receiver指向代理对象
    return Reflect.set(target, key, value, receiver);
  },
}

// reactive方法逻辑
export function reactive(obj) {
  if (!isObject(obj)) return;
  if (obj[ReactiveFlags.IS_REACTIVE]) {
    return obj;
  }

  const proxyObj = new Proxy(obj, mutableHandle);
  return proxyObj;
}

源码阅读补充

• 部分属性不代理如：Symbol(内置)、__proto__等(对象内置属性)、__v_isRef、__isVue_等
• 如果对象存在原型链继承的关系原型链上存在此属性，后子级直接修改该属性，则只触发当前对象利用toRaw获取源对象判断是否为当前对象
• 数组处理循环递归
  • 重写数组部分方法，当数组方法需要用到源数组做操作或对比时includes、indexOf，内部使用源对象进行操作，保证结果准确。
  • 当数组通过修改长度值为newLen时
    • 比对newLen值与数组下标项，若小于则触发更新
    • 直接监听数组长度也会触发更新
  • 重写通过数组方法修改数组本身的方法,(push,pop,shift,unshift,splice)
    • 当执行时，会收集数组的length属性，并触发length属性的依赖更新，及自身的依赖更新等
• Reflect补充图例：

ref实现

• API们
  • ref：将一个基本数据类型转换为响应式数据类型。
    • 将原始值包装成对象defineProperty，与computed的原理相似
      • 若是复杂数据类型，则走reactive，转为响应式数据
    • 并设置get访问器收集依赖、set触发依赖。
  • toRefs：将对象所有属性再代理一层，访问时代理到源对象上
  • toRef：代理对象一个属性
  • proxyRefs：反向代理，将响应式数据又反向代理成普通数据使用，本质还是访问.value。
    • 用于模板中访问数据。

import { isArray, isObject } from "@vue/shared";
import { trackEffects, triggerEffect } from "./effect";
import { reactive } from "./reactive";

function toReavtive(val) {
  return isObject(val) ? reactive(val) : val;
}

/**
 * 判断传入的值，若为引用类型，则将其响应式化，最后将其defineProperty化[拦截]
 *  收集依赖
 *  值发生改变：触发更新
 *      判断传入的值是否为引用类型
 *
 *
 */
class RefImpl {
  public dep = new Set();
  public _value;
  public __v_isRef = true;
  constructor(public source) {
    this.source = toReavtive(source);
  }
  get value() {
    trackEffects(this.dep);
    return this._value;
  }
  set value(newVal) {
    if (newVal !== this.source) {
      this._value = toReavtive(newVal);
      this.source = newVal;
      triggerEffect(this.dep);
    }
  }
}

/**
 *
 * @param source 原始值
 *
 */
export const ref = (source) => {
  return new RefImpl(source);
};

// 将数据做一层代理[将解构后的响应式数据再用访问器的方式包裹一次，并与源数据保持引用]。正向代理
class ObjectRefImpl {
  constructor(public obj, public key) {}
  get value() {
    return this.obj[this.key];
  }
  set value(newVal) {
    this.obj[this.key] = newVal;
  }
}

// 将单个响应式数据包裹
export const toRef = (obj, key) => {
  return new ObjectRefImpl(obj, key);
};

// 用于将多个响应式数据解构[将解构后的响应式数据再用访问器的方式包裹一次，并与源数据保持引用]
export const toRefs = (obj) => {
  // 判断obj是对象还是数组
  const result = isArray(obj) ? new Array(obj.length) : obj;
  for (let key in result) {
    toRef(result, key);
  }
};

// 将ref数据反向代理，用于模板中访问ref数据不用.value

export const proxyRef = (obj) => {
  return new Proxy(obj, {
    get(target, key, recevier) {
      let r = Reflect.get(target, key, recevier);
      // 判断该数据是否是ref数据，如果不是[没有.value]，直接返回
      return r.__v_isRef ? r.value : r;
    },
    set(target, key, value, recevier) {
      let oldVal = target[key];
      if (oldVal.__v_isRef) {
        // 获取旧值，如果旧值是ref数据，则赋值给其value值
        oldVal.value = value;
        return true;
      } else {
        // 如果不是，则直接赋值
        return Reflect.set(target, key, value, recevier);
      }
    },
  });
};