vue源码解读--组件更新流程

经过之前章节的分析,我们知道,组件的render将触发update并最终执行patch

\bullet render关键信息如下

\star 框红一,使用$vnode保存组件的占位节点

\star 框红二,使用parent指向占位节点

\bullet update关键信息如下

\star 框红1,在组件初次渲染,使用_vnode保存了其渲染vnode,因此当更新时可以拿到

\star 将新旧vnode传递给patch做更新

\bullet patch关键信息如下

    \star 由于在update中传递的新旧vnode有值,故跳到框红一的位置。对于组件而言,它在父组件中的表现形式是"占位符节点",并不是被html识别的元素,故isRealElement为false

    \star 框红二,当满足sameVnode时调用patchVnode方法做dom更新

(该函数通过一系列对比,将判定两次的渲染vnode是否是同一个,并据此执行不同的patch逻辑)

    \star 框红三,当新旧节点不一致时,走else逻辑,分别执行创建--更新-销毁三个步骤



因此,也就是说,组件更新分成了两个分支--两次节点相同时走patchVnode,否则走创建--更新--销毁

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容