能否手写vue3响应式原理-面试进阶

（二）响应式原理

利用ES6中Proxy作为拦截器，在get时收集依赖，在set时触发依赖，来实现响应式。

（三）手写实现

1、实现Reactive

基于原理，我们可以先写一下测试用例

 //reactive.spec.tsdescribe("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是否是一个objectif (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; //表示当前依赖是否激活，如果清除过则为falsedeps: any[] = []; //包含该依赖的depsonStop?: () => 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; //表示当前依赖是否激活，如果清除过则为falsedeps: any[] = []; //包含该依赖的depsonStop?: () => 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是否是一个objectif (isObject(res)) {return isReadOnly ? readonly(res) : reactive(res);}​if (!isReadOnly) {//收集依赖track(target, key);}return res;};}

2、实现shallowReadonly

我们先看一下shallow的含义

shallow：不深的, 浅的，不深的, 不严肃的, 肤浅的，浅薄的。

那么shallowReadonly，指的是只对最外层进行限制，而内部的仍然是一个普通的、正常的值。

 //shallowReadonly.tsexport 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.tsexport function ref(value: any) {return new RefImpl(value);}

我们来实现一下RefImpl类，原理其实跟reactive类似，只是一些细节处不同。

 //ref.tsclass 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.tsexport 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();}}}

• 实现proxyRefs

   //实现对ref对象进行代理//如user = {//  age:ref(10),//  ...//}export function proxyRefs(ObjectWithRefs) {return new Proxy(ObjectWithRefs, {get(target, key) {// 如果是ref 返回.value//如果不是 返回valuereturn unRef(Reflect.get(target, key));},set(target, key, value) {if (isRef(target[key]) && !isRef(value)) {target[key].value = value;return true; //?} else {return Reflect.set(target, key, value);}},});}
  

4、实现computed

computed的实现也很巧妙，利用调度器机制和一个私有变量_value，实现缓存和惰性求值。

通过注解（一）（二）（三）可理解其实现流程

 //computedimport { 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，那么直接返回存储起来的_valuereturn 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;}//是否是refexport function isRef(ref: any) {return !!ref._v_isRef;}//解构refexport function unRef(ref: any) {return isRef(ref) ? ref.value : ref;}//是否改变export const hasChanged = (val, newVal) => {return !Object.is(val, newVal);};

判断响应式类型的依据是，在get的时候，检查传进来的key是否等于某枚举值来做为判断依据，在get中加入

 //reactive.tsexport const enum ReactiveFlags {IS_REACTIVE = "__v_isReactive",IS_READONLY = "__v_isReadOnly",}​//baseHandler.tsfunction 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;}//...};}