一. 组件更新从 instance.update 开始

组件更新分为 “主动更新” 和 “被动更新”。主动更新场景是当前组件模板依赖响应式变量发生改变从而导致的更新。被动更新的场景是子树中的子组件由于父组件发生模板更新，被强制更新。

被动更新相比主动更新，多了一个 updateComponentPreRender 的过程。即多了 更新 props、插槽 等先前步骤。

但无论主动更新还是被动更新，核心都是 创建最新 vnode 树，缓存老 vnode 树，新老 vnode 树代入 patch 处理。

二. Patch——processComponent 处理组件更新

除了更新一堆指针，本质上就是 instance.next = n2；invalidateJob(instance.update)；instance.update()；

重点是在子组件被动调用 instance.update() 前 判断子组件是否真的需要“被动更新” 以及 invalidateJob 剔除重复任务的两个过程。

三. Patch——processElement处理DOM元素更新

普通dom节点的更新无非就是更新当前节点的 props 和 子节点。

为什么不更新标签？

标签的变更属于 vnode.type 前后发生变化。在 patch 之初就已经被拦截。此处肯定是前后普通vnode类型相同的情况下发生更新。

普通dom元素节点的子元素只有三种情况：

• 文本
• 空
• 数组

只需要对子元素分类处理即可：