vue3源码解读--组件更新

目录

    vue2源码

    vue3源码

示例

源码

    组件更新的前提是依赖能被正确收集到,经过上一节分析,我们知道trackEffects正是来做这件事情的,故将代码定位于此。核心看其收集的对象是谁。该方法的入参如下

    其中的activeEffect是在setupRenderEffect中使用new ReactiveEffect后执行run创建的,核心是向其挂载了更新函数componentUpdateFn

    接着将dep的引用添加到activeEffect中


    那么理论上来说,只需要在设置值得时候,遍历activeEffect.deps执行每一个key.run即可

    将代码定位到createSetter。第一眼我是心存疑惑的,这里使用Reflect.set已经设置值了,难道不会重复触发createSetter造成死循环?但是转念一想,这里操作的并不是代理后的对象,而是初始值,所以才不会重新触发,这也正是需要在第二个匡红位置手动调用trigger的原因

    接着调用triggerEffects,对收集到的依赖依次调用

    scheduler其实就是在组件更新前,创建依赖实例ReactiveEffect时生成的

    故将代码定位到run函数,可以看到这里调用了更新逻辑即componentUpdateFn

    这会再次进入组件的render和patch流程,不过本次的patch的oldVnode是有值的。这将进行一轮比对更新,其实可以认为是diff过程。尤其是现在vue3已经支持多根的情况下

总结

    render阶段track依赖--修改值trigger依赖更新--重新render--patch过程中根据新旧vnode做比对更新--使用原生domApi做更新--updated

你可能感兴趣的:(vue3源码解读--组件更新)