// ...
// =====>初始化对应{target -> key -> dep}的结构
let depsMap = targetMap.get(target)
if (depsMap === void 0) {
targetMap.set(target, (depsMap = new Map()))
}
let dep = depsMap.get(key as string | symbol)
if (!dep) {
depsMap.set(key as string | symbol, (dep = new Set()))
}
// <=====初始化对应{target -> key -> dep}的结构
// 依赖列表里如果没有，add
if (!dep.has(effect)) {
// 这里将effect作为依赖，缓存到依赖列表
dep.add(effect)
effect.deps.push(dep)
}
}
}
// 简化的trigger
function trigger(
target: any,
type: OperationTypes,
key?: string | symbol,
extraInfo?: any
) {
// 获取对应target在track过程中缓存的依赖
const depsMap = targetMap.get(target)
const effects: Set<ReactiveEffect> = new Set()
// 省略分类逻辑
depsMap.forEach(dep => {
// 将effect分类过滤添加到effects
})
const run = (effect: ReactiveEffect) => {
// 有个异步调度的过程，nextTick
scheduleRun(effect, target, type, key, extraInfo)
}
effects.forEach(run)
}
大致流程：
总结
现在的代码只有新特性的实现，而且ES6+TS的组合可读性大大提高，编辑器支持也很好，所以相对会好读很多。这里只是简单的理了一下vue 3.0 reactive的整体流程，细节还有很多地方值得学习，继续加油。
