模板编译 → Render函数 → 虚拟DOM(VNode) → Diff算法 → 真实DOM

// 真实 DOM 操作（低效）
for (let i = 0; i < 100; i++) {
  const div = document.createElement('div')
  div.textContent = `Item ${i}`
  container.appendChild(div) // 触发 100 次 DOM 操作
}

// 虚拟 DOM 批量更新（高效）
const vnodes = []
for (let i = 0; i < 100; i++) {
  vnodes.push(createVNode('div', `Item ${i}`))
}
// 一次性更新真实 DOM
patch(container, vnodes) // 只触发 1 次 DOM 操作

// VNode 构造函数（简化版）
class VNode {
  constructor (
    tag,           // 标签名（如 'div'、'span'）
    data,          // 节点数据（attrs、class、style、props等）
    children,      // 子节点数组
    text,          // 文本内容
    elm,           // 对应的真实DOM节点
    context,       // 组件上下文
    componentOptions // 组件选项
  ) {
    this.tag = tag
    this.data = data
    this.children = children
    this.text = text
    this.elm = elm
    this.context = context
    this.componentOptions = componentOptions
  }
}

// 模板
<div id="app" class="container">
  <span>Hello</span>
</div>

// 对应的 VNode 对象
{
  tag: 'div',
  data: {
    attrs: { id: 'app' },
    staticClass: 'container'
  },
  children: [
    {
      tag: 'span',
      children: [
        {
          text: 'Hello',
          tag: undefined
        }
      ]
    }
  ]
}

// 模板
<my-component :prop="value" @click="handleClick"></my-component>

// 对应的 VNode 对象
{
  tag: 'vue-component-my-component',
  data: {
    props: { prop: value },
    on: { click: handleClick }
  },
  componentOptions: {
    Ctor: MyComponent,
    propsData: { prop: value },
    listeners: { click: handleClick }
  }
}

// 函数签名
createElement(tag, data, children)

// 参数说明
// @tag {String | Object | Function} - HTML标签名、组件选项对象或函数
// @data {Object} - 节点数据对象（可选）
// @children {String | Array} - 子节点（可选）

// 1. 创建简单元素
createElement('div', 'Hello World')

// 2. 创建带属性的元素
createElement('div', {
  attrs: { id: 'app' },
  class: ['container', 'active'],
  style: { color: 'red' }
}, 'Hello')

// 3. 创建嵌套结构
createElement('div', {
  class: 'parent'
}, [
  createElement('h1', 'Title'),
  createElement('p', 'Content'),
  createElement('span', { class: 'highlight' }, 'Highlighted')
])

// 4. 创建组件
createElement('my-component', {
  props: { title: 'Hello' },
  on: { click: this.handleClick }
})

function patch (oldVnode, vnode) {
  // 1. 判断是否为相同节点
  if (sameVnode(oldVnode, vnode)) {
    // 相同节点：进行深度对比
    patchVnode(oldVnode, vnode)
  } else {
    // 不同节点：直接替换
    const parentElm = oldVnode.elm.parentNode
    createElm(vnode)
    parentElm.insertBefore(vnode.elm, oldVnode.elm)
    parentElm.removeChild(oldVnode.elm)
  }
}

// 判断是否为相同节点
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 是否都定义了
  )
}

function patchVnode (oldVnode, vnode) {
  const elm = vnode.elm = oldVnode.elm
  const oldCh = oldVnode.children
  const ch = vnode.children

  // 1. 如果是同一个对象，直接返回
  if (oldVnode === vnode) return

  // 2. 更新节点属性
  updateAttrs(oldVnode, vnode)
  updateClass(oldVnode, vnode)
  updateStyle(oldVnode, vnode)
  // ... 其他属性更新

  // 3. 处理子节点
  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(oldCh, 0, oldCh.length - 1)
    }
  } else if (oldVnode.text !== vnode.text) {
    // 文本节点：更新文本内容
    elm.textContent = vnode.text
  }
}

function updateChildren (parentElm, oldCh, newCh) {
  let oldStartIdx = 0
  let newStartIdx = 0
  let oldEndIdx = oldCh.length - 1
  let newEndIdx = newCh.length - 1

  let oldStartVnode = oldCh[oldStartIdx]
  let oldEndVnode = oldCh[oldEndIdx]
  let newStartVnode = newCh[newStartIdx]
  let newEndVnode = newCh[newEndIdx]

  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
    if (sameVnode(oldStartVnode, newStartVnode)) {
      // 新旧头节点相同
      patchVnode(oldStartVnode, newStartVnode)
      oldStartVnode = oldCh[++oldStartIdx]
      newStartVnode = newCh[++newStartIdx]
    } else if (sameVnode(oldEndVnode, newEndVnode)) {
      // 新旧尾节点相同
      patchVnode(oldEndVnode, newEndVnode)
      oldEndVnode = oldCh[--oldEndIdx]
      newEndVnode = newCh[--newEndIdx]
    } else if (sameVnode(oldStartVnode, newEndVnode)) {
      // 旧头新尾相同
      patchVnode(oldStartVnode, newEndVnode)
      // 移动到末尾
      parentElm.insertBefore(oldStartVnode.elm, oldEndVnode.elm.nextSibling)
      oldStartVnode = oldCh[++oldStartIdx]
      newEndVnode = newCh[--newEndIdx]
    } else if (sameVnode(oldEndVnode, newStartVnode)) {
      // 旧尾新头相同
      patchVnode(oldEndVnode, newStartVnode)
      // 移动到开头
      parentElm.insertBefore(oldEndVnode.elm, oldStartVnode.elm)
      oldEndVnode = oldCh[--oldEndIdx]
      newStartVnode = newCh[++newStartIdx]
    } else {
      // 四种情况都不匹配：使用 key 查找
      let idxInOld = findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
      if (isUndef(idxInOld)) {
        // 新元素：创建并插入
        createElm(newStartVnode, parentElm, oldStartVnode.elm)
      } else {
        // 已存在：移动并更新
        const vnodeToMove = oldCh[idxInOld]
        patchVnode(vnodeToMove, newStartVnode)
        oldCh[idxInOld] = undefined
        parentElm.insertBefore(vnodeToMove.elm, oldStartVnode.elm)
      }
      newStartVnode = newCh[++newStartIdx]
    }
  }

  // 处理剩余节点
  if (oldStartIdx > oldEndIdx) {
    // 旧节点已处理完，添加新剩余节点
    addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx)
  } else if (newStartIdx > newEndIdx) {
    // 新节点已处理完，删除旧剩余节点
    removeVnodes(oldCh, oldStartIdx, oldEndIdx)
  }
}

<div v-for="item in items">
  {{ item.name }}
</div>

<div v-for="(item, index) in items" :key="index">
  {{ item.name }}
</div>

<div v-for="item in items" :key="item.id">
  {{ item.name }}
</div>

// ✅ 好的做法：使用唯一标识
<li v-for="user in users" :key="user.id">
  {{ user.name }}
</li>

// ✅ 好的做法：使用静态数据
<option v-for="opt in OPTIONS" :key="opt.value">
  {{ opt.label }}
</option>

// ❌ 避免：使用 index
<li v-for="(item, index) in items" :key="index">
  {{ item.name }}
</li>

// ❌ 避免：不使用 key
<li v-for="item in items">
  {{ item.name }}
</li>

<template>
  <div>
    <!-- 场景1：可排序列表 -->
    <div v-for="todo in sortedTodos" :key="todo.id">
      <input v-model="todo.text" />
      <button @click="moveUp(todo.id)">↑</button>
    </div>

    <!-- 场景2：动态表单 -->
    <div v-for="(field, index) in formFields" :key="field.id">
      <input :placeholder="field.label" v-model="field.value" />
      <button @click="removeField(field.id)">删除</button>
    </div>

    <!-- 场景3：嵌套列表 -->
    <div v-for="category in categories" :key="category.id">
      <h3>{{ category.name }}</h3>
      <div v-for="item in category.items" :key="item.id">
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<!-- ✅ 使用唯一 key -->
<div v-for="item in items" :key="item.id">{{ item.name }}</div>

<!-- ❌ 避免使用 index -->
<div v-for="(item, index) in items" :key="index">{{ item.name }}</div>

<!-- 静态内容只渲染一次 -->
<div v-once>
  <h1>{{ staticTitle }}</h1>
  <p>{{ staticDescription }}</p>
</div>

<!-- 适用于大量静态内容 -->
<ul>
  <li v-for="item in staticItems" v-once :key="item.id">
    {{ item.name }}
  </li>
</ul>

<!-- ✅ 频繁切换使用 v-show -->
<div v-show="isVisible">Toggle content</div>

<!-- ✅ 条件很少改变使用 v-if -->
<div v-if="shouldRender">Conditional content</div>

export default {
  data() {
    return {
      items: [] // 大数组
    }
  },
  computed: {
    // ✅ 使用计算属性缓存结果
    filteredItems() {
      return this.items.filter(item => item.active)
    },
    sortedItems() {
      return [...this.filteredItems].sort((a, b) => a.id - b.id)
    }
  },
  methods: {
    // ❌ 避免在方法中重复计算
    getFilteredItems() {
      return this.items.filter(item => item.active)
    }
  }
}

// 分页加载
export default {
  data() {
    return {
      allItems: [],    // 所有数据
      pageSize: 50,    // 每页数量
      currentPage: 1
    }
  },
  computed: {
    displayedItems() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.allItems.slice(start, end)
    }
  }
}

<!-- 使用第三方虚拟滚动库 -->
<virtual-list :size="50" :remain="20">
  <div v-for="item in largeList" :key="item.id">
    {{ item.name }}
  </div>
</virtual-list>

export default {
  data() {
    return {
      // ❌ 大量数据设为响应式（性能消耗大）
      // largeList: new Array(10000).fill(null)
    }
  },
  created() {
    // ✅ 非响应式数据
    this.staticData = Object.freeze(largeList)
  }
}

// 冻结不需要变化的数据
this.items = Object.freeze([
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' }
])

// Vue 不会为冻结对象设置响应式
// 节省了 Observer 遍历的开销

// 开启性能追踪（仅开发环境）
Vue.config.performance = true

// 在 DevTools 中查看：
// - 组件渲染时间
// - 更新性能
// - 内存使用情况

export default {
  methods: {
    heavyOperation() {
      console.time('heavyOperation')
      
      // 执行耗时操作
      for (let i = 0; i < 10000; i++) {
        // ...
      }
      
      console.timeEnd('heavyOperation')
    }
  },
  
  // 使用生命周期钩子监控
  beforeUpdate() {
    this.startTime = performance.now()
  },
  updated() {
    const duration = performance.now() - this.startTime
    console.log(`Update took ${duration}ms`)
  }
}

<!-- v-if：条件很少改变，或初始化时不渲染 -->
<expensive-component v-if="showExpensive"></expensive-component>

<!-- v-show：需要频繁切换显示状态 -->
<modal v-show="isModalOpen"></modal>

<!-- 初始状态 -->
<div v-for="(item, index) in items" :key="index">
  <input v-model="item.text" />
</div>

<!-- items: [{text: 'A'}, {text: 'B'}, {text: 'C'}] -->
<!-- index: [0, 1, 2] -->
<!-- key: [0, 1, 2] -->

<!-- 删除第二项后 -->
<!-- items: [{text: 'A'}, {text: 'C'}] -->
<!-- index: [0, 1] -->
<!-- key: [0, 1] -->

<!-- 问题： -->
<!-- 旧 key=1 对应 {text: 'B'} -->
<!-- 新 key=1 对应 {text: 'C'} -->
<!-- Vue 会复用 key=1 的 DOM，导致 input 中的值错乱 -->

<div v-for="item in items" :key="item.id">
  <input v-model="item.text" />
</div>

// 1. 开启性能模式
Vue.config.performance = true

// 2. 使用 render 函数调试
new Vue({
  render(h) {
    console.log('Creating VNode for:', this.$data)
    return h('div', this.message)
  }
}).$mount('#app')

// 3. 使用全局钩子
Vue.config.optionMergeStrategies.render = function(parent, child) {
  console.log('Render function merged')
  return child || parent
}

// 4. 使用 Vue DevTools
// - 查看 VNode 树结构
// - 分析渲染性能
// - 追踪组件更新

<!-- ❌ 不推荐：v-for 优先级高于 v-if -->
<div v-for="item in items" v-if="item.active" :key="item.id">
  {{ item.name }}
</div>

<!-- 等价于 -->
<div v-for="item in items" :key="item.id">
  <template v-if="item.active">
    {{ item.name }}
  </template>
</div>

<!-- 每次渲染都会遍历所有 items，即使大部分不显示 -->

<!-- ✅ 方案1：使用计算属性过滤 -->
<div v-for="item in activeItems" :key="item.id">
  {{ item.name }}
</div>

<script>
export default {
  computed: {
    activeItems() {
      return this.items.filter(item => item.active)
    }
  }
}
</script>

<!-- ✅ 方案2：嵌套 template -->
<template v-for="item in items">
  <div v-if="item.active" :key="item.id">
    {{ item.name }}
  </div>
</template>

// ✅ 将频繁更新的部分拆分为独立组件
export default {
  components: {
    // 这个小组件只会在 item 变化时更新
    ItemComponent: {
      props: ['item'],
      template: `
        <div class="item">
          <span>{{ item.name }}</span>
          <button @click="$emit('remove')">删除</button>
        </div>
      `
    }
  },
  template: `
    <div>
      <ItemComponent 
        v-for="item in items" 
        :key="item.id" 
        :item="item"
        @remove="removeItem(item.id)"
      />
    </div>
  `
}

// 函数式组件：无状态、无实例，渲染更快
Vue.component('StaticHeader', {
  functional: true,
  props: ['title', 'subtitle'],
  render(h, context) {
    return h('header', [
      h('h1', context.props.title),
      h('p', context.props.subtitle)
    ])
  }
})

// 使用
<StaticHeader 
  title="Welcome" 
  subtitle="Vue.js Application" 
/>

<template>
  <div>
    <!-- 分页加载 -->
    <div v-for="item in visibleItems" :key="item.id">
      {{ item.name }}
    </div>
    
    <button @click="loadMore">加载更多</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allItems: [],       // 所有数据
      visibleCount: 20,   // 可见数量
      pageSize: 20        // 每页数量
    }
  },
  computed: {
    visibleItems() {
      return this.allItems.slice(0, this.visibleCount)
    }
  },
  methods: {
    loadMore() {
      this.visibleCount += this.pageSize
    }
  },
  async created() {
    // 分批加载数据
    this.allItems = await fetchItems()
  }
}
</script>

// ❌ 不推荐：深层嵌套
export default {
  data() {
    return {
      user: {
        profile: {
          preferences: {
            theme: 'dark'
          }
        }
      }
    }
  }
}

// ✅ 推荐：扁平化数据结构
export default {
  data() {
    return {
      userName: '',
      userTheme: 'dark'
    }
  }
}

export default {
  data() {
    return {
      // 冻结后的大数据不会转换为响应式
      largeList: Object.freeze([
        // ... 大量静态数据
      ])
    }
  }
}

<template>
  <!-- ✅ 推荐：计算属性过滤 -->
  <div v-for="item in activeItems" :key="item.id">
    {{ item.name }}
  </div>
  
  <!-- ✅ 推荐：嵌套 template -->
  <template v-for="item in items">
    <div v-if="shouldShow(item)" :key="item.id">
      {{ item.name }}
    </div>
  </template>
</template>

<script>
export default {
  computed: {
    activeItems() {
      return this.items.filter(item => item.active)
    }
  }
}
</script>

import { h } from 'snabbdom/build/package/h'
import { init } from 'snabbdom/build/package/init'
import { styleModule } from 'snabbdom/build/package/modules/style'
import { eventListenersModule } from 'snabbdom/build/package/modules/eventlisteners'

// 使用 init() 创建 patch()，传入模块处理属性/样式/事件
let patch = init([styleModule, eventListenersModule])

// 使用 h() 创建 vnode
let vnode = h('div.cls', {
  style: { color: '#DEDEDE', backgroundColor: '#181A1B' },
  on: { click: clickHandler }
}, [
  h('h1', 'Hello Snabbdom'),
  h('p', '这是段落')
])

function clickHandler () {
  console.log(this.elm.innerHTML)
}

const app = document.querySelector('#app')
let oldVnode = patch(app, vnode)

// 更新视图
setTimeout(() => {
  vnode = h('div.cls', [
    h('h1', 'Hello World'),
    h('p', '这是段落')
  ])
  oldVnode = patch(oldVnode, vnode)
}, 2000)

src/package/
├── h.ts              # h() 函数，用来创建 VNode
├── init.ts           # 加载 modules、DOMAPI，返回 patch 函数
├── vnode.ts          # 虚拟节点定义
├── hooks.ts          # 所有钩子函数的定义
├── htmldomapi.ts     # 对 DOM API 的包装
├── is.ts             # 判断数组和原始值的函数
├── thunk.ts          # 优化处理，对复杂视图不可变值的优化
├── tovnode.ts        # DOM 转换成 VNode
└── modules/
    ├── attributes.ts
    ├── class.ts
    ├── dataset.ts
    ├── eventlisteners.ts
    ├── props.ts
    └── style.ts