共计 8716 个字符，预计需要花费 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;}
//...
};
}
正文完
发表至： javascript
2022-10-29
