关于javascript:能否手写vue3响应式原理面试进阶

27次阅读

共计 8715 个字符,预计需要花费 22 分钟才能阅读完成。

(二)响应式原理

利用 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();
     }
   }
 }
  • 实现 proxyRefs

     // 实现对 ref 对象进行代理
     // 如 user = {//  age:ref(10),
     //  ...
     //}
     export function proxyRefs(ObjectWithRefs) {
       return new Proxy(ObjectWithRefs, {get(target, key) {
           // 如果是 ref 返回.value
           // 如果不是 返回 value
           return 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,实现 缓存 惰性求值

通过注解(一)(二)(三)可了解其实现流程

 //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;}
     //...
   };
 }

正文完
 0