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

作者: 习惯水文的前端苏 | 来源:发表于2021-02-18 20:13 被阅读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，否则走创建--更新--销毁

网友评论

本文标题：vue源码解读--组件更新流程

本文链接：https://www.haomeiwen.com/subject/acunxltx.html

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