// 简化的 track function track( target: any, type: OperationTypes, key?: string | symbol ) { // 只有在依赖收集阶段才进行依赖收集 // 除了render，其他场景也可能会触发Proxy的get，但不需要进行依赖收集 // activeReactiveEffectStack栈顶包装了当前render的组件的mount和update的逻辑 const effect = activeReactiveEffectStack[activeReactiveEffectStack.length - 1] // 如果effect为空，说明当前不在render阶段 if (effect) { // ... // =====>初始化对应{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的整体流程，细节还有很多地方值得学习，继续加油。