（二）响应式原理
利用 ES6 中 Proxy 作为拦截器，在 get 时收集依赖，在 set 时触发依赖，来实现响应式。
（三）手写实现
1、实现 Reactive
基于原理，我们可以先写一下测试用例
//reactive.spec.ts describe("effect", () => { it("happy path", () => { const original = { foo: 1 }; //原始数据 const observed = reactive(original); //响应式数据 expect(observed).not.toBe(original); expect(observed.foo).toBe(1); //正常获取数据 expect(isReactive(observed)).toBe(true); expect(isReactive(original)).toBe(false); expect(isProxy(observed)).toBe(true); }); });
复制代码
首先实现数据的拦截处理，通过 ES6 的 Proxy，实现获取和赋值操作。
//reactive.ts //对new Proxy()进行包装 export function reactive(raw) { return createActiveObject(raw, mutableHandlers); } function createActiveObject(raw: any, baseHandlers) { //直接返回一个Proxy对象，实现响应式 return new Proxy(raw, baseHandlers); }
复制代码
//baseHandler.ts //抽离出一个handler对象 export const mutableHandlers = { get:createGetter(), set:createSetter(), }; function createGetter(isReadOnly: Boolean = false, shallow: Boolean = false) { return function get(target, key) { const res = Reflect.get(target, key); // 看看res是否是一个object if (isObject(res)) { //如果是，则进行嵌套处理,使得返回的对象中的 对象 也具备响应式 return isReadOnly ? readonly(res) : reactive(res); } if (!isReadOnly) { //如果不是readonly类型，则收集依赖 track(target, key); } return res; }; } function createSetter() { return function set(target, key, value) { const res = Reflect.set(target, key, value); //触发依赖 trigger(target, key); return res; }; }
复制代码
从上述代码中，我们可以⚠️注意到 track(target, key) 和 trigger(target, key) 这两个函数，分别是对依赖的收集和触发。
依赖：我们可以把依赖认为是把用户对数据的操控（用户函数，副作用函数）包装成一个东西，我们在 get 的时候将依赖一个一个收集起来，set 的时候全部触发，即可实现响应式效果。
2、实现依赖的收集和触发
//effect.ts //全局变量 let activeEffect: ReactiveEffect; //当前的依赖 let shouldTrack: Boolean; //是否收集依赖 const targetMap = new WeakMap(); //依赖树
复制代码
targetMap 结构：
targetMap: {每一个 target（depsMap）：{每一个 key（depSet）：[每一个依赖]}}
WeakMap 和 Map 的区别
1、WeakMap 只接受对象作为 key，如果设置其他类型的数据作为 key，会报错。
2、WeakMap 的 key 所引用的对象都是弱引用，只要对象的其他引用被删除，垃圾回收机制就会释放该对象占用的内存，从而避免内存泄漏。
3、由于 WeakMap 的成员随时可能被垃圾回收机制回收，成员的数量不稳定，所以没有 size 属性。
4、没有 clear()方法
5、不能遍历
首先我们定义一个依赖类，称为 ReactiveEffect，对用户函数进行包装，赋予一些属性和方法。
//effect.ts //响应式依赖 — ReactiveEffect类 class ReactiveEffect { private _fn: any; //用户函数， active = true; //表示当前依赖是否激活，如果清除过则为false deps: any[] = []; //包含该依赖的deps onStop?: () => void; //停止该依赖的回调函数 public scheduler: Function; //调度函数 //构造函数 constructor(fn, scheduler?) { this._fn = fn; this.scheduler = scheduler; } //执行副作用函数 run() { //用户函数，可以报错，需要用try包裹 try { //如果当前依赖不是激活状态，不进行依赖收集，直接返回 if (!this.active) { return this._fn(); } //开启依赖收集 shouldTrack = true; activeEffect = this; //调用时会触发依赖收集 const result = this._fn(); //关闭依赖收集 shouldTrack = false; //返回结果 return result; } finally { //todo } } }
复制代码
参考 前端进阶面试题详细解答
effect 影响函数
创建一个用户函数作用函数，称为 effect，这个函数的功能为基于 ReactiveEffect 类创建一个依赖，触发用户函数（的时候，触发依赖收集），返回用户函数。
//创建一个依赖 export function effect(fn, option: any = {}) { //为当前的依赖创建响应式实例 const _effect = new ReactiveEffect(fn, option.scheduler); Object.assign(_effect, option); //最开始调用一次,其中会触发依赖收集 _effect.run() -> _fn() -> get() -> track() _effect.run(); const runner: any = _effect.run.bind(_effect); //在runner上挂载依赖，方便在其他地方通过runner访问到该依赖 runner.effect = _effect; return runner; }
复制代码
bind()：在原函数的基础上创建一个新函数，使新函数的 this 指向传入的第一个参数，其他参数作为新函数的参数
用户触发依赖收集时，将依赖添加到 targetMap 中。
收集/添加依赖
//把依赖添加到targetMap对应target的key中，在重新set时在trigger中重新触发 export function track(target: Object, key) { //如果不是track的状态，直接返回 if (!isTracking()) return; // target -> key -> dep //获取对应target，获取不到则创建一个，并加进targetMap中 let depsMap = targetMap.get(target); if (!depsMap) { targetMap.set(target, (depsMap = new Map())); } //获取对应key，获取不到则创建一个，并加进target中 let depSet = depsMap.get(key); if (!depSet) { depsMap.set(key, (depSet = new Set())); } //如果depSet中已经存在该依赖，直接返回 if (depSet.has(activeEffect)) return; //添加依赖 trackEffects(depSet); } export function trackEffects(dep) { //往target中添加依赖 dep.add(activeEffect); //添加到当前依赖的deps数组中 activeEffect.deps.push(dep); }
复制代码
触发依赖
//一次性触发对应target中key的所有依赖 export function trigger(target, key) { let depsMap = targetMap.get(target); let depSet = depsMap.get(key); //触发依赖 triggerEffects(depSet); } export function triggerEffects(dep) { for (const effect of dep) { if (effect.scheduler) { effect.scheduler(); } else { effect.run(); } } }
复制代码
3、移除/停止依赖
我们在 ReactiveEffect 这个类中，增加一个 stop 方法，来暂停依赖收集和清除已经存在的依赖
//响应式依赖 — 类 class ReactiveEffect { private _fn: any; //用户函数， active = true; //表示当前依赖是否激活，如果清除过则为false deps: any[] = []; //包含该依赖的deps onStop?: () => void; //停止该依赖的回调函数 public scheduler: Function; //调度函数 //... stop() { if (this.active) { cleanupEffect(this); //执行回调 if (this.onStop) { this.onStop(); } //清除激活状态 this.active = false; } } } //清除该依赖挂载的deps每一项中的该依赖 function cleanupEffect(effect) { effect.deps.forEach((dep: any) => { dep.delete(effect); }); effect.deps.length = 0; } //移除一个依赖 export function stop(runner) { runner.effect.stop(); }
复制代码
（四）衍生类型
1、实现 readonly
readonly 相比于 reactive，实现上相对比较简单，它是一个只读类型，不会涉及 set 操作，更不需要收集/触发依赖。
export function readonly(raw) { return createActiveObject(raw, readonlyHandlers); } export const readonlyHandlers = { get: readonlyGet, set: (key, target) => { console.warn(`key:${key} set 失败，因为target是一个readonly对象`, target); return true; }, }; const readonlyGet = createGetter(true); function createGetter(isReadOnly: Boolean = false, shallow: Boolean = false) { return function get(target, key) { if (key === ReactiveFlags.IS_REACTIVE) { return !isReadOnly; } else if (key === ReactiveFlags.IS_READONLY) { return isReadOnly; } //... // 看看res是否是一个object if (isObject(res)) { return isReadOnly ? readonly(res) : reactive(res); } if (!isReadOnly) { //收集依赖 track(target, key); } return res; }; }
复制代码
2、实现 shallowReadonly
我们先看一下 shallow 的含义
shallow：不深的, 浅的，不深的, 不严肃的, 肤浅的，浅薄的。
那么 shallowReadonly，指的是只对最外层进行限制，而内部的仍然是一个普通的、正常的值。
//shallowReadonly.ts export function shallowReadonly(raw) { return createActiveObject(raw, shallowReadonlyHandlers); } export const shallowReadonlyHandlers = extend({}, readonlyHandlers, { get: shallowReadonlyGet, }); const shallowReadonlyGet = createGetter(true, true); function createGetter(isReadOnly: Boolean = false, shallow: Boolean = false) { return function get(target, key) { //.. const res = Reflect.get(target, key); //是否shallow,是的话很直接返回 if (shallow) { return res; } if (isObject(res)) { //... } }; }
复制代码
3、实现 ref
ref 相对 reactive 而言，实际上他不存在嵌套关系，就是一个 value。
//ref.ts export function ref(value: any) { return new RefImpl(value); }
复制代码
我们来实现一下 RefImpl 类，原理其实跟 reactive 类似，只是一些细节处不同。
//ref.ts class RefImpl { private _value: any; //转化后的值 public dep; //依赖容器 private _rawValue: any; //原始值， public _v_isRef = true; //判断ref类型 constructor(value) { this._rawValue = value; //记录原始值 this._value = convert(value); //存储转化后的值 this.dep = new Set(); //创建依赖容器 } get value() { trackRefValue(this); //收集依赖 return this._value; } set value(newValue) { //新老值不同，才触发更改 if (hasChanged(newValue, this._rawValue)) { // 一定先修改value，再触发依赖 this._rawValue = newValue; this._value = convert(newValue); triggerEffects(this.dep); } } }
复制代码
//ref.ts //对value进行转换（value可能是object） export function convert(value: any) { return isObject(value) ? reactive(value) : value; } export function trackRefValue(ref: RefImpl) { if (isTracking()) { trackEffects(ref.dep); } } //effect.ts export function isTracking(): Boolean { //是否开启收集依赖 & 是否有依赖 return shouldTrack && activeEffect !== undefined; } export function trackEffects(dep) { dep.add(activeEffect); activeEffect.deps.push(dep); } export function triggerEffects(dep) { for (const effect of dep) { if (effect.scheduler) { effect.scheduler(); } else { effect.run(); } } }
复制代码
4、实现 computed
computed 的实现也很巧妙，利用调度器机制和一个私有变量_value，实现缓存和惰性求值。
通过注解（一）（二）（三）可理解其实现流程
//computed import { ReactiveEffect } from "./effect"; class computedRefImpl { private _dirty: boolean = true; private _effect: ReactiveEffect; private _value: any; constructor(getter) { //创建时，会创建一个响应式实例，并且挂载 this._effect = new ReactiveEffect(getter, () => { //（三） //当监听的值发生改变时，会触发set，此时触发当前依赖 //因为存在调度器，不会立刻执行用户fn（实现了lazy），而是将_dirty更改为true //在下一次用户get时，会调用run方法，重新拿到最新的值返回 if (!this._dirty) { this._dirty = true; } }); } get value() { //（一） //默认_dirty是true //那么在第一次get的时候，会触发响应式实例的run方法，触发依赖收集 //同时拿到用户fn的值，存储起来，然后返回出去 if (this._dirty) { this._dirty = false; this._value = this._effect.run(); } //（二） //当监听的值没有改变时，_dirty一直为false //所以，第二次get时，因为_dirty为false，那么直接返回存储起来的_value return this._value; } } export function computed(getter) { //创建一个computed实例 return new computedRefImpl(getter); }
复制代码
（五）工具类
//是否是reactive响应式类型 export function isReactive(target) { return !!target[ReactiveFlags.IS_REACTIVE]; } //是否是readonly响应式类型 export function isReadOnly(target) { return !!target[ReactiveFlags.IS_READONLY]; } //是否是响应式对象 export function isProxy(target) { return isReactive(target) || isReadOnly(target); } //是否是对象 export function isObject(target) { return typeof target === "object" && target !== null; } //是否是ref export function isRef(ref: any) { return !!ref._v_isRef; } //解构ref export function unRef(ref: any) { return isRef(ref) ? ref.value : ref; } //是否改变 export const hasChanged = (val, newVal) => { return !Object.is(val, newVal); };
复制代码
判断响应式类型的依据是，在 get 的时候，检查传进来的 key 是否等于某枚举值来做为判断依据，在 get 中加入
//reactive.ts export const enum ReactiveFlags { IS_REACTIVE = "__v_isReactive", IS_READONLY = "__v_isReadOnly", } //baseHandler.ts function createGetter(isReadOnly: Boolean = false, shallow: Boolean = false) { return function get(target, key) { //... if (key === ReactiveFlags.IS_REACTIVE) { return !isReadOnly; } else if (key === ReactiveFlags.IS_READONLY) { return isReadOnly; } //... }; }
复制代码
评论