前端开发那些事儿

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

2021-02-18  本文已影响0人  习惯水文的前端苏

经过之前章节的分析,我们知道,组件的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,否则走创建--更新--销毁

上一篇 下一篇

猜你喜欢

热点阅读