虚拟 DOM 与 Diff 算法：Vue 的高效更新策略

模板(Template) → AST(抽象语法树) → 渲染函数(render) → 虚拟 DOM(VNode)

<template>
  <div id="app" class="container">
    <p>{{ message }}</p>
    <button @click="handleClick">Click</button>
  </div>
</template>

{
  type: 1, // 元素节点
  tag: 'div',
  attrsList: [
    { name: 'id', value: 'app' },
    { name: 'class', value: 'container' }
  ],
  children: [
    {
      type: 1,
      tag: 'p',
      children: [
        { type: 2, expression: '_s(message)', text: '{{ message }}' }
      ]
    },
    {
      type: 1,
      tag: 'button',
      events: { click: 'handleClick' },
      children: [{ type: 3, text: 'Click' }]
    }
  ]
}

{
  type: 1,
  tag: 'div',
  static: false, // 动态节点(有绑定)
  children: [
    {
      tag: 'button',
      static: true, // 静态节点(纯文本)
      children: [{ text: 'Click', static: true }]
    }
  ]
}

function render() {
  with (this) {
    return _c('div', { attrs: { id: 'app', class: 'container' } }, [
      _c('p', [_v(_s(message))]),
      _c('button', { on: { click: handleClick } }, [_v('Click')]),
    ])
  }
}

{
  tag: 'div',
  data: {
    attrs: { id: 'app', class: 'container' }
  },
  children: [
    {
      tag: 'p',
      children: [
        { text: 'Hello Vue', isComment: false }
      ]
    },
    {
      tag: 'button',
      data: {
        on: { click: handleClick }
      },
      children: [{ text: 'Click' }]
    }
  ],
  elm: undefined, // 真实 DOM 节点(初次为空)
  key: undefined
}

function sameVnode(a, b) {
  return (
    a.key === b.key && // key 必须相同
    a.tag === b.tag && // 标签必须相同
    a.isComment === b.isComment && // 注释节点标识
    isDef(a.data) === isDef(b.data) && // data 存在性一致
    sameInputType(a, b) // input 类型一致
  )
}

// 旧节点
;[A, B, C, D]

// 新节点
;[B, A, D, C]

旧列表: [A, B, C, D]
         ↑        ↑
      oldStart  oldEnd

新列表: [B, A, D, C]
         ↑        ↑
      newStart  newEnd

旧: [A, undefined, C, D]
新: [B, A, D, C]
         ↑

旧: [A✓, undefined, C, D]
新: [B✓, A✓, D, C]

[B, A, D, C]

// 旧: [A, B, C, D, E]
// 新: [B, A, D, C, E]

// 1. 预处理:头尾相同节点
// 头: 无
// 尾: E 相同

// 2. 中间乱序部分: [A,B,C,D] → [B,A,D,C]

// 3. 建立新节点索引映射
// B→0, A→1, D→2, C→3

// 4. 在旧节点中找对应位置
// [1, 0, 3, 2] (B在旧列表位置1,A在0...)

// 5. 找最长递增子序列
// [0, 2] 对应 [A, C]

// 6. 只需移动非子序列节点 B 和 D

<li v-for="(item, index) in list" :key="index">
  <input v-model="item.value" />
  {{ item.name }}
</li>

[
  { name: 'A', value: '' }, // key=0
  { name: 'B', value: '' }, // key=1
  { name: 'C', value: '' }  // key=2
]

[
  { name: 'B', value: '' }, // key=0 (变了!)
  { name: 'C', value: '' }  // key=1 (变了!)
]

<li v-for="item in list" :key="item.id">
  <input v-model="item.value" />
  {{ item.name }}
</li>

<li v-for="(color, index) in ['red', 'green', 'blue']" :key="index">
  {{ color }}
</li>

<div>
  <span>静态文本</span>
  <span>{{ dynamic }}</span>
</div>

const _hoisted_1 = /*#__PURE__*/ _createElementVNode('span', null, '静态文本', -1)

export function render(_ctx) {
  return (
    _openBlock(),
    _createElementBlock('div', null, [
      _hoisted_1, // 静态节点提升
      _createElementVNode('span', null, _toDisplayString(_ctx.dynamic), 1 /* TEXT */),
    ])
  )
}

a.key === b.key &&
  a.tag === b.tag &&
  a.isComment === b.isComment &&
  isDef(a.data) === isDef(b.data) &&
  sameInputType(a, b)

1. 新旧 VNode 树对比
       ↓
2. 同层比较(不跨层)
       ↓
3. sameVnode 判断(key + tag)
       ↓
4. 相同:复用 + patch 属性/子节点
   不同:销毁 + 创建
       ↓
5. 多节点:双端比较/快速 Diff
       ↓
6. 生成最小 DOM 操作指令
       ↓
7. 批量提交到真实 DOM