之前讲过当新旧节点两个都是数组vnode的时候，就会执行我们的diff过程，也就是patchKeyedChildren方法。
我们可以回忆一下在Vue2中的diff，是通过头部和头部，尾部和尾部，头部和尾部等交叉对比来实现的，我们可以看一下在Vue3中，是如何实现的。

前两节讲了组件的创建和首次将DOM VNode挂载到页面的过程，其中当我们页面数据发生变化时候，会调用副作用渲染函数更新组件,这次来看下组件更新部分的逻辑，主要做了三件事情：

• 更新组件VNode节点

首先明确一点，vnode是在组件instance中存在的。
组件挂载方法主要在mountComponent中。
这里的创建组件实例主要是通过函数去创建的，在Vue2当中，是通过实例化类的方式去创建的

本地调试源码

• 拷贝一份源码
• 安装依赖yarn install
• 执行yarn dev -s生成dist文件夹，里面有打包后的文件和sourceMap文件。

分而治之

分而治之是算法设计中的一种方法，它将问题分为多个和原问题相似的小问题，递归解决小问题，再将解决方式合并以解决原来的问题。

算法步骤:
1.分解原问题为多个子问题
2.解决子问题，用返回解决子问题的方式的递归算法
3.组合这些子问题的解决方式，得到原问题的解

排序算法

排序算法动画图示网站:
https://visualgo.net/zh/sorting

图是网络结构抽象模型

图的相关术语

1
2
3

一个图G = (V,E)
V:一组顶点
E:一组边

二叉堆是一种特殊的二叉树，也叫堆数据结构,可以高效的找出最大值和最小值，常被应用于优先队列

二叉堆数据结构

二叉堆数据结构有两个特性:

树的基础概念

一个树结构包含一系列存在父子关系的节点，每个节点都有一个父节点（除了顶部第一个节点），以及0个或者多个子节点

根节点、内部节点、叶节点(外部节点),键

递归是一种解决问题的方法，它从解决问题的各个小部分开始，直到解决最初的大问题。

下面能够调用自身的函数，就是递归函数。每个函数都必须有一个基线条件，即一个不再递归调用的条件

1
2
3
4
5
6
7

function understandRecursion(someParam) {
    const recursionAnswer = confirm('xxx')
    if (recursionAnswer === true) {
        return true
    }
    understandRecursion(someParam)
}