Vue Diff 过程数据变化 notify 通知 watch更新 update更新前patch比较新老节点比较原则：

数据变化
notify 通知 watch更新
update更新前patch比较新老节点
比较原则：

尽量不动
只修改属性
位置调整
删除或者新增

5.新老虚拟dom树比较方法：

只比较同一层级的dom（因为前端很少有跨级移动dom，复杂度由On3降到On）
不同节点直接删除掉旧的节点，创建新的节点
相同节点（节点类型、key、input类型的type）直接复用，更新属性
比较子节点：

新有子节点，旧没有 -> 直接创建插入新的
新有没有节点，旧的有 -> 直接删除旧的
新老都有子节点 --> 开启双指针比较

双指针比较方法：

头头依次比较
尾尾依次比较
头尾比较
尾头比较

先比较新的和旧的第一个子节点是否一样，如果一样会移动前面两个指针到下一个
如果比对最后新的节点多了一个子节点就把它插入旧的中
如果开始第一个子节点不一样就从后面开始进行比较，比到最后把新增的节点插入到旧的dom中
头和尾节点都不相等的情况下，用当前的头和旧的尾节点进行比较，如果一样就把旧的尾节点移到前面去，然后将旧的尾指针向前移动一位，当前头指针移动到下一个子节点上
下一步用旧的结尾和新的开头节点进行比较
如果存在key，就会拿的当前子节点的key去旧的子节点中找，如果找到就将它移动到旧节点的前面，然后就将指针移向当前节点的第二个子节点上
如果当前子节点没有就将它直接插入到旧的节点中，最后把旧的节点中多余出的子节点删除掉。

Vue3改进

事件缓存：将事件缓存，可以理解为变成静态的了
添加静态标记：Vue2 是全量 Diff，Vue3 是静态标记 + 非全量 Diff
静态提升：创建静态节点时保存，后续直接复用
使用最长递增子序列优化了对比流程：Vue2 里在 updateChildren() 函数里对比变更，在 Vue3 里这一块的逻辑主要在 patchKeyedChildren() 函数里，具体看下面

事件缓存

比如这样一个有点击事件的按钮

<button @click="handleClick">按钮</button>
复制代码

来看下在 Vue3 被编译后的结果

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock("button", {
    onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.handleClick && _ctx.handleClick(...args)))
  }, "按钮"))
}
复制代码

注意看，onClick 会先读取缓存，如果缓存没有的话，就把传入的事件存到缓存里，都可以理解为变成静态节点了，优秀吧，而在 Vue2 中就没有缓存，就是动态的

静态标记

看一下静态标记是啥？

源码地址：packages/shared/src/patchFlags.ts

export const enum PatchFlags {
  TEXT = 1 ,  // 动态文本节点
  CLASS = 1 << 1,  // 2   动态class
  STYLE = 1 << 2,  // 4   动态style
  PROPS = 1 << 3,  // 8   除去class/style以外的动态属性
  FULL_PROPS = 1 << 4,       // 16  有动态key属性的节点，当key改变时，需进行完整的diff比较
  HYDRATE_EVENTS = 1 << 5,   // 32  有监听事件的节点
  STABLE_FRAGMENT = 1 << 6,  // 64  一个不会改变子节点顺序的fragment (一个组件内多个根元素就会用fragment包裹)
  KEYED_FRAGMENT = 1 << 7,   // 128 带有key属性的fragment或部分子节点有key
  UNKEYEN_FRAGMENT = 1 << 8, // 256  子节点没有key的fragment
  NEED_PATCH = 1 << 9,       // 512  一个节点只会进行非props比较
  DYNAMIC_SLOTS = 1 << 10,   // 1024   动态slot
  HOISTED = -1,  // 静态节点 
  BAIL = -2      // 表示 Diff 过程中不需要优化
}
复制代码

先了解一下静态标记有什么用？看个图

在什么地方用到的呢？比如下面这样的代码

<div id="app">
    <div>沐华</div>
    <p>{{ age }}</p>
</div>
复制代码

在 Vue2 中编译的结果是，有兴趣的可以自行安装 vue-template-compiler 自行测试

with(this){
    return _c(
      'div',
      {attrs:{"id":"app"}},
      [ 
        _c('div',[_v("沐华")]),
        _c('p',[_v(_s(age))])
      ]
    )
}
复制代码

在 Vue3 中编译的结果是这样的，有兴趣的可以点击这里自行测试

const _hoisted_1 = { id: "app" }
const _hoisted_2 = /*#__PURE__*/_createElementVNode("div", null, "沐华", -1 /* HOISTED */)

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock("div", _hoisted_1, [
    _hoisted_2,
    _createElementVNode("p", null, _toDisplayString(_ctx.age), 1 /* TEXT */)
  ]))
}
复制代码

看到上面编译结果中的 -1 和 1 了吗，这就是静态标记，这是在 Vue2 中没有的，patch 过程中就会判断这个标记来 Diff 优化流程，跳过一些静态节点对比

静态提升

其实还是拿上面 Vue2 和 Vue3 静态标记的例子，在 Vue2 里每当触发更新的时候，不管元素是否参与更新，每次都会全部重新创建，就是下面这一堆

with(this){
    return _c(
      'div',
      {attrs:{"id":"app"}},
      [ 
        _c('div',[_v("沐华")]),
        _c('p',[_v(_s(age))])
      ]
    )
}
复制代码

而在 Vue3 中会把这个不参与更新的元素保存起来，只创建一次，之后在每次渲染的时候不停地复用，比如上面例子中的这个，静态的创建一次保存起来

const _hoisted_1 = { id: "app" }
const _hoisted_2 = /*#__PURE__*/_createElementVNode("div", null, "沐华", -1 /* HOISTED */)
复制代码

然后每次更新 age 的时候，就只创建这个动态的内容，复用上面保存的静态内容

export function render(_ctx, _cache, $props, $setup, $data, $options) {
  return (_openBlock(), _createElementBlock("div", _hoisted_1, [
    _hoisted_2,
    _createElementVNode("p", null, _toDisplayString(_ctx.age), 1 /* TEXT */)
  ]))
}
复制代码

patchKeyedChildren

在 Vue2 里 updateChildren 会进行

头和头比
尾和尾比
头和尾比
尾和头比
都没有命中的对比

在 Vue3 里 patchKeyedChildren 为

头和头比
尾和尾比
基于最长递增子序列进行移动/添加/删除

看个例子，比如

老的 children：[ a, b, c, d, e, f, g ]
新的 children：[ a, b, f, c, d, e, h, g ]

先进行头和头比，发现不同就结束循环，得到 [ a, b ]
再进行尾和尾比，发现不同就结束循环，得到 [ g ]
再保存没有比较过的节点 [ f, c, d, e, h ]，并通过 newIndexToOldIndexMap 拿到在数组里对应的下标，生成数组 [ 5, 2, 3, 4, -1 ]，-1 是老数组里没有的就说明是新增
然后再拿取出数组里的最长递增子序列，也就是 [ 2, 3, 4 ] 对应的节点 [ c, d, e ]
然后只需要把其他剩余的节点，基于 [ c, d, e ] 的位置进行移动/新增/删除就可以了

使用最长递增子序列可以最大程度的减少 DOM 的移动，达到最少的 DOM 操作，有兴趣的话去 leet-code 第300题(最长递增子序列) 体验下