{
  tag: 'div',                    // 标签名
  data: {                        // 节点数据
    attrs: {
      class: 'container',
      id: 'app'
    }
  },
  children: [                    // 子节点数组
    {
      tag: 'h1',
      children: [{
        text: '标题',            // 文本内容
        type: 3                  // 节点类型：3表示文本节点
      }]
    },
    {
      tag: 'p',
      children: [{
        text: '内容',
        type: 3
      }]
    }
  ]
}

// Vue中的VNode类
class VNode {
  constructor(tag, data, children, text, elm, context) {
    // 基础属性
    this.tag = tag              // 标签名，如 'div', 'span'
    this.data = data            // 节点数据（属性、样式、事件等）
    this.children = children    // 子节点数组
    this.text = text            // 文本内容（文本节点）
    this.elm = elm              // 对应的真实DOM节点
    
    // 重要属性
    this.key = data && data.key // 节点的唯一标识
    this.isStatic = false       // 是否为静态节点
    this.componentInstance = undefined // 组件实例
  }
}

// 普通HTML元素
{
  tag: 'div',
  data: { attrs: { class: 'container' } },
  children: [...]
}

// 文本节点
{
  text: 'Hello World',
  type: 3
}

// 组件节点
{
  tag: 'vue-component-1-MyComponent',
  componentInstance: componentInstance,
  componentOptions: { ... }
}

// 注释节点
{
  text: '注释内容',
  isComment: true
}

function patch(oldVnode, vnode) {
  // 1. 如果新节点不存在，销毁旧节点
  if (!vnode) {
    if (oldVnode) destroyOldVnode(oldVnode)
    return
  }

  // 2. 如果旧节点不存在，创建新节点
  if (!oldVnode) {
    createNewVnode(vnode)
    return
  }

  // 3. 比较是否为相同节点
  if (sameVnode(oldVnode, vnode)) {
    // 相同节点，进行详细比较
    patchVnode(oldVnode, vnode)
    } else {
      // 不同节点，替换整个节点
    replaceVnode(oldVnode, vnode)
  }
}

function sameVnode(a, b) {
  return (
    a.key === b.key && (  // key必须相同
        a.tag === b.tag &&                    // 标签名相同
        a.isComment === b.isComment &&        // 注释状态相同
        isDef(a.data) === isDef(b.data) &&    // 数据存在性相同
        sameInputType(a, b)                   // input类型相同
    )
  )
}

// 示例：新VNode中有新的子节点
// 旧VNode: [A, B, C]
// 新VNode: [A, B, C, D]
// 操作：创建节点D

// 示例：新VNode中删除了某个子节点
// 旧VNode: [A, B, C]
// 新VNode: [A, C]
// 操作：删除节点B

// 示例：新VNode中某个节点的内容发生了变化
// 旧VNode: { tag: 'div', text: 'Hello' }
// 新VNode: { tag: 'div', text: 'World' }
// 操作：更新文本内容

function patchVnode(oldVnode, vnode) {
  // 1. 如果节点完全相同，直接返回
  if (oldVnode === vnode) {
    return
  }

  // 2. 复用DOM元素
  const elm = vnode.elm = oldVnode.elm

  // 3. 处理静态节点（性能优化）
  if (vnode.isStatic && oldVnode.isStatic && vnode.key === oldVnode.key) {
    vnode.componentInstance = oldVnode.componentInstance
    return  // 静态节点直接复用，跳过所有更新
  }

  // 4. 更新节点数据（属性、样式、事件等）
  updateNodeData(oldVnode, vnode)

  // 5. 处理子节点
  const oldCh = oldVnode.children
  const ch = vnode.children
  
  if (isUndef(vnode.text)) {
    // 新节点不是文本节点
    if (isDef(oldCh) && isDef(ch)) {
      // 都有子节点 → 调用updateChildren进行详细比较
      if (oldCh !== ch) updateChildren(elm, oldCh, ch)
    } else if (isDef(ch)) {
      // 只有新节点有子节点 → 创建节点
      addVnodes(elm, null, ch, 0, ch.length - 1)
    } else if (isDef(oldCh)) {
      // 只有旧节点有子节点 → 删除节点
      removeVnodes(elm, oldCh, 0, oldCh.length - 1)
    }
  } else if (oldVnode.text !== vnode.text) {
    // 都是文本节点但内容不同 → 更新文本
    setTextContent(elm, vnode.text)
  }
}

// 比较新旧列表的第一个节点
if (sameVnode(oldStartVnode, newStartVnode)) {
  patchVnode(oldStartVnode, newStartVnode, ...)
  oldStartIdx++
  newStartIdx++
}

// 比较新旧列表的最后一个节点
if (sameVnode(oldEndVnode, newEndVnode)) {
  patchVnode(oldEndVnode, newEndVnode, ...)
  oldEndIdx--
  newEndIdx--
}

// 比较旧列表的第一个节点和新列表的最后一个节点
if (sameVnode(oldStartVnode, newEndVnode)) {
  patchVnode(oldStartVnode, newEndVnode, ...)
  // 移动DOM节点到正确位置
  insertBefore(parentElm, oldStartVnode.elm, nextSibling(oldEndVnode.elm))
}

// 比较旧列表的最后一个节点和新列表的第一个节点
if (sameVnode(oldEndVnode, newStartVnode)) {
  patchVnode(oldEndVnode, newStartVnode, ...)
  // 移动DOM节点到正确位置
  insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
}

// 通过key在旧列表中查找
if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
idxInOld = isDef(newStartVnode.key) 
  ? oldKeyToIdx[newStartVnode.key] 
  : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)

// 旧列表：[A, B, C, D]
// 新列表：[A, C, B, D]

// 第1轮：新前与旧前比较 A === A ✓
// 结果：A保持不变，指针移动

// 第2轮：新前与旧前比较 B !== C ✗
// 第3轮：新后与旧后比较 D === D ✓
// 结果：D保持不变，指针移动

// 第4轮：新后与旧前比较 B === B ✓
// 结果：将B移动到新位置
// DOM操作：insertBefore(B, D)

// 第5轮：新前与旧前比较 C === C ✓
// 结果：C保持不变

// 最终结果：只进行了1次DOM移动操作

// 好的key使用
<ul>
  <li v-for="item in list" :key="item.id">{{ item.name }}</li>
</ul>

// 避免使用index作为key
<ul>
  <li v-for="(item, index) in list" :key="index">{{ item.name }}</li>
</ul>

// 静态节点会被标记，避免重复diff
function isStatic(node) {
  return !!(node.pre || (
    !node.hasBindings &&           // 没有动态绑定
    !node.if && !node.for &&       // 没有v-if或v-for
    !isBuiltInTag(node.tag) &&     // 不是内置标签
    isPlatformReservedTag(node.tag) && // 是平台保留标签
    !isDirectChildOfTemplateFor(node) &&
    Object.keys(node).every(isStaticKey)
  ))
}

// Vue会将多次数据变更合并，批量更新DOM
this.message = 'Hello'
this.count = 1
this.name = 'Vue'

// 这些变更会被合并为一次更新

// 频繁切换时使用v-show
<div v-show="visible">内容</div>

// 条件很少改变时使用v-if
<div v-if="condition">内容</div>

// 不好的做法
<div>{{ expensiveComputation() }}</div>

// 好的做法
computed: {
  computedValue() {
    return this.expensiveComputation()
  }
}

// 将复杂模板拆分为组件
<template>
  <div>
    <user-header :user="user" />
    <user-content :user="user" />
    <user-footer :user="user" />
  </div>
</template>