1.1 Diff 概念
vue 基于虚拟 DOM 做更新 。diff 的核心就是比较两个虚拟节点的差异 。Vue 的 diff 算法是平级比较，不考虑跨级比较的情况。内部采用深度递归的方式 + 双指针的方式进行比较。
1.2 Vue2 Diff 比较流程
- 1.先比较是否是相同节点 key tag
- 2.相同节点比较属性,并复用老节点（将老的虚拟 dom 复用给新的虚拟节点 DOM）
- 3.比较儿子节点，考虑老节点和新节点儿子的情况
- 老的没儿子，现在有儿子。 直接插入新的儿子
- 老的有儿子，新的没儿子。直接删除页面节点
- 老的儿子是文本，新的儿子是文本，直接更新文本节点即可
- 老的儿子是一个列表，新的儿子也是一个列表 updateChildren
- 4.优化比较：头头、尾尾、头尾、尾头
- 5.比对查找进行复用
- 乱序的时候，取新的一个节点，在旧的里面查找 （新的去老的里面查找）
Vue3 中采用最长递增子序列来实现 diff 优化
3 Vue3 Diff 算法比较流程
全量 Diff：
- 刚开始默认从头比对，相同节点则复用节点。
- 如果头部节点不一致，我们就从后向前对比，相同节点则复用。
- 默认优化了子节点追加和子节点删除的情况。
- 乱序比对，通过最长递增子序列实现在复用过程中减少节点的移动操作。
Vue3 采用最长递增子序列，求解不需要移动的元素有哪些
