4. Reactivity 模块
4. Reactivity 模块
安装响应式模块
pnpm install @vue/reactivity -w
<div id="app"></div>
<script type="module">
import {
reactive,
effect
} from '/node_modules/@vue/reactivity/dist/reactivity.esm-browser.js';
const state = reactive({ name: 'erxiao', age: 30 });
effect(() => {
// 副作用函数 默认执行一次,响应式数据变化后再次执行
app.innerHTML = state.name + '今年' + state.age + '岁了';
});
setTimeout(() => {
state.age++;
}, 1000);
</script>
reactive
方法会将对象变成 proxy 对象,effect
中使用reactive
对象时会进行依赖收集,稍后属性变化时会重新执行effect
函数~。
1.编写 reactive 函数
import { isObject } from '@vue/shared';
function createReactiveObject(target: object, isReadonly: boolean) {
if (!isObject(target)) {
return target;
}
}
// 常用的就是reactive方法
export function reactive(target: object) {
return createReactiveObject(target, false);
}
// 后面的方法,不是重点我们先不进行实现...
/*
export function shallowReactive(target: object) {
return createReactiveObject(target, false)
}
export function readonly(target: object) {
return createReactiveObject(target, true)
}
export function shallowReadonly(target: object) {
return createReactiveObject(target, true)
}
*/
export function isObject(value: unknown): value is Record<any, any> {
return typeof value === 'object' && value !== null;
}
由此可知这些方法接受的参数必须是一个对象类型。否则没有任何效果
const reactiveMap = new WeakMap(); // 缓存列表
const mutableHandlers: ProxyHandler<object> = {
get(target, key, receiver) {
// 等会谁来取值就做依赖收集
const res = Reflect.get(target, key, receiver);
return res;
},
set(target, key, value, receiver) {
// 等会赋值的时候可以重新触发effect执行
const result = Reflect.set(target, key, value, receiver);
return result;
}
};
function createReactiveObject(target: object, isReadonly: boolean) {
if (!isObject(target)) {
return target;
}
const exisitingProxy = reactiveMap.get(target); // 如果已经代理过则直接返回代理后的对象
if (exisitingProxy) {
return exisitingProxy;
}
const proxy = new Proxy(target, mutableHandlers); // 对对象进行代理
reactiveMap.set(target, proxy);
return proxy;
}
这里必须要使用 Reflect 进行操作,保证 this 指向永远指向代理对象
let person = {
name: 'erxiao',
get aliasName() {
return '**' + this.name + '**';
}
};
let p = new Proxy(person, {
get(target, key, receiver) {
console.log(key);
// return Reflect.get(target,key,receiver)
return target[key];
}
});
// 取aliasName时,我希望可以收集aliasName属性和name属性
p.aliasName;
// 这里的问题出自于 target[key] ,target指代的是原对象并不是代理对象
将对象使用 proxy 进行代理,如果对象已经被代理过,再次重复代理则返回上次代理结果。 那么,如果将一个代理对象传入呢?
const enum ReactiveFlags {
IS_REACTIVE = '__v_isReactive'
}
const mutableHandlers: ProxyHandler<object> = {
get(target, key, receiver) {
if (key === ReactiveFlags.IS_REACTIVE) {
// 在get中增加标识,当获取IS_REACTIVE时返回true
return true;
}
}
};
function createReactiveObject(target: object, isReadonly: boolean) {
if (target[ReactiveFlags.IS_REACTIVE]) {
// 在创建响应式对象时先进行取值,看是否已经是响应式对象
return target;
}
}
这样我们防止重复代理就做好了~~~
这里我们为了代码方便维护,我们将
mutableHandlers
抽离出去到baseHandlers.ts
中。
2.编写 effect 函数
export let activeEffect = undefined; // 当前正在执行的effect
class ReactiveEffect {
active = true;
deps = []; // 收集effect中使用到的属性
constructor(public fn, public scheduler) {}
run() {
if (!this.active) {
// 不是激活状态
return this.fn();
}
let lastEffect = activeEffect; // 用于构建当前激活的effect
try {
activeEffect = this;
return this.fn();
} finally {
activeEffect = lastEffect;
}
}
}
export function effect(fn, options?) {
const _effect = new ReactiveEffect(fn, () => {
_effect.run();
}); // 创建响应式effect
_effect.run(); // 让响应式effect默认执行
}
3.依赖收集
默认执行
effect
时会对属性,进行依赖收集
get(target, key, receiver) {
if (key === ReactiveFlags.IS_REACTIVE) {
return true;
}
const res = Reflect.get(target, key, receiver);
track(target, 'get', key); // 依赖收集
return res;
}
4.track 方法实现
reactiveEffect.ts
const targetMap = new WeakMap(); // 记录依赖关系
export const createDep = (cleanup, key) => {
const dep = new Map() as any;
dep.cleanup = cleanup; // 给清理依赖埋下伏笔
dep.name = key;
return dep;
};
export function track(target, type, key) {
if (activeEffect) {
let depsMap = targetMap.get(target); // {对象:map({})}
if (!depsMap) {
targetMap.set(target, (depsMap = new Map()));
}
let dep = depsMap.get(key);
if (!dep) {
// {对象:{ 属性 :{ effect, effect }}}
depsMap.set(key, (dep = createDep(() => depsMap.delete(key), key)));
}
trackEffect(activeEffect, dep);
}
}
将属性和对应的 effect 维护成映射关系,后续属性变化可以触发对应的 effect 函数重新
run
effect.ts
class ReactiveEffect {
_depsLength = 0; // 用于记录依赖的个数
_trackId = 0; // 用于记录收集的次数
deps = [];
// ...
}
export function trackEffect(effect, dep) {
// 属性记住effect
dep.set(effect, effect._trackId);
// effect记住依赖
effect.deps[effect._depsLength++] = dep;
}
5.触发更新
set(target, key, value, receiver) {
// 等会赋值的时候可以重新触发effect执行
let oldValue = target[key]
const result = Reflect.set(target, key, value, receiver);
if (oldValue !== value) {
trigger(target, key, value, oldValue);
}
return result;
}
reactiveEffect.ts
export function trigger(target, key?, newValue?, oldValue?) {
// 通过对象找到属性对应的映射表
const depsMap = targetMap.get(target);
if (!depsMap) {
return;
}
// 通过属性找到 effecMap
let dep = depsMap.get(key);
if (dep) {
triggerEffects(dep);
}
}
effect.ts
export function triggerEffects(dep) {
for (const effect of dep.keys()) {
if (effect.scheduler) {
effect.scheduler();
}
}
}
cleanup
6.分支切换与在渲染时我们要避免副作用函数产生的遗留
const state = reactive({ flag: true, name: 'erxiao', age: 30 });
effect(() => {
// 副作用函数 (effect执行渲染了页面)
console.log('render');
document.body.innerHTML = state.flag ? state.name : state.age;
});
setTimeout(() => {
state.flag = false;
setTimeout(() => {
console.log('修改name,原则上不更新');
state.name = 'zf';
}, 1000);
}, 1000);
export class ReactiveEffect {
// ...
run() {
// ...
try {
activeEffect = this;
preCleanupEffect(this); // 每次渲染前重新进行依赖收集
return this.fn();
} finally {
activeEffect = lastEffect;
}
}
}
function preCleanupEffect(effect) {
// 执行函数前先进行清理操作
effect._trackId++;
effect._depsLength = 0;
}
重新进行依赖收集时,需要做比对
export function trackEffect(effect, dep) {
// 如果一个属性多次收集,需要排除
if (dep.get(effect) !== effect._trackId) {
// 更新id
dep.set(effect, effect._trackId);
// 获取上次的依赖,比对是否有变化
const oldDep = effect.deps[effect._depsLength];
// {flag, name} 1
// {flag, age} 2
// 如果有变化,需要清理以前的,并且塞入新的
if (oldDep !== dep) {
if (oldDep) {
cleanupDepEffect(oldDep, effect);
}
// 记录effect对应的依赖
effect.deps[effect._depsLength++] = dep;
} else {
effect._depsLength++;
}
}
}
删除掉收集器中对应的 effect
function cleanupDepEffect(dep, effect) {
dep.delete(effect);
if (dep.size === 0) {
dep.cleanup(); // 清理此属性
}
}
销毁多于的依赖
try {
activeEffect = this;
preCleanupEffect(this); // 每次渲染前重新进行依赖收集
return this.fn();
} finally {
postCleanupEffect(this); // 清理依赖
activeEffect = lastEffect;
}
function postCleanupEffect(effect) {
// 重新做收集后,看依赖列表有没有增加,有增加就要删除 (map是不能添加重复的)
if (effect.deps.length > effect._depsLength) {
// 仅处理多出来的删除即可
for (let i = effect._depsLength; i < effect.deps.length; i++) {
cleanupDepEffect(effect.deps[i], effect);
}
effect.deps.length = effect._depsLength;
}
}
7.调度执行
trigger
触发时,我们可以自己决定副作用函数执行的时机、次数、及执行方式
export function effect(fn, options?) {
// 创建一个响应式effect 数据变化后可以重新执行
// 创建一个effect,只要依赖的属性变化了就要执行回调
const _effect = new ReactiveEffect(fn, () => {
_effect.run();
});
_effect.run();
if (options) {
// 合并参数
Object.assign(_effect, options);
}
const runner = _effect.run.bind(_effect);
runner.effect = _effect;
return runner; // 返回run方法
}
8.防止递归调用
通过 running 属性防止递归调用
run() {
if (!this.active) {
// 不是激活状态
return this.fn();
}
let lastEffect = activeEffect; // 用于构建当前激活的effect
try {
activeEffect = this;
this._runnings++;
preCleanupEffect(this); // 累计重新收集
return this.fn();
} finally {
postCleanupEffect(this);
this._runnings--;
activeEffect = lastEffect;
}
}
9.深度代理
get(target, key, receiver) {
if (key === ReactiveFlags.IS_REACTIVE) {
return true;
}
// 等会谁来取值就做依赖收集
const res = Reflect.get(target, key, receiver);
track(target, 'get', key);
if(isObject(res)){
return reactive(res);
}
return res;
}
当取值时返回的值是对象,则返回这个对象的代理对象,从而实现深度代理