vue源码解析之Reactive(依赖收集) 三

effect 收集依赖

• 在reactive的src下创建 effect.ts, 并导出effect函数

• 创建一个 createReactiveEffect 函数，在effect函数中使用，createReactiveEffect接收 fn,options参数，此函数的执行，即为fn的执行同时此函数中会设置 uid:标识 raw:对应函数映射 _isEffect：此effect为一个响应式 effect options：保存用户属性， 最终吧这个 函数返回出去

• 由于在执行createGetter时会触发 依赖收集，因此 在effect.ts中创建 track方法

• 执行track方法时获取当前执行的 activeEffect， 因此定义一个全局变量：activeEffect

• track 核心逻辑

• 创建一个 effect.html， 引入我们的effect API,然后再浏览器中运行 如果浏览器中出现了对应文字，那么第一次执行成功，说明我的方法是没有问题的

effect 依赖更新(找属性对应的 effect 让其执行)

当我们在设置值时，会触发 set方法，那么就会分场景判断更新还是新增

这里贴下trigger触发更新的代码

总结： createGetter ==> get ==> track ==>targetMap createSetter ==> set ==> trigger ==> 从targetMap(收集的依赖中)中找到对应的key effect进行执行

这里判断场景相对复杂，如需要源码，关注公众号，共同学习，一起进步，如果对你有帮助，请点个赞，你的认可是我持续更新最大动力…………

注：本文连载