Skip to main content

Vue2与Vue3的Diff算法对比

· 7 min read
LIU

Vue2 与 Vue3 的 Diff 算法对比​

Vue 的虚拟 DOM 和 Diff 算法是其高效渲染的核心。Vue3 在 Vue2 的基础上对 Diff 算法进行了重大优化，本文将深入对比两者的差异，并分析这些优化带来的性能提升。

1. 虚拟 DOM 基础​

虚拟 DOM 结构​

Vue2 和 Vue3 的虚拟 DOM 结构有所不同：

// Vue2 的虚拟 DOM 结构
{
  tag: 'div',
  data: {
    attrs: { id: 'app' },
    on: { click: handler }
  },
  children: [
    {
      tag: 'span',
      data: { attrs: { class: 'text' } },
      children: ['Hello']
    }
  ]
}

// Vue3 的虚拟 DOM 结构
{
  type: 'div',
  props: {
    id: 'app',
    onClick: handler
  },
  children: [
    {
      type: 'span',
      props: { class: 'text' },
      children: ['Hello']
    }
  ]
}

主要区别​

  1. Vue3 使用 type 替代 tag 表示节点类型
  2. Vue3 扁平化处理 props，不再区分 attrs 和 on
  3. Vue3 的虚拟 DOM 结构更加简洁，减少了内存占用

2. Diff 算法核心流程​

Vue2 的 Diff 算法​

Vue2 的 Diff 算法采用双端比较的方式：

function updateChildren(parentElm, oldCh, newCh) {
  let oldStartIdx = 0
  let oldEndIdx = oldCh.length - 1
  let newStartIdx = 0
  let newEndIdx = newCh.length - 1
  
  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
    if (sameVnode(oldCh[oldStartIdx], newCh[newStartIdx])) {
      patchVnode(oldCh[oldStartIdx], newCh[newStartIdx])
      oldStartIdx++
      newStartIdx++
    } else if (sameVnode(oldCh[oldEndIdx], newCh[newEndIdx])) {
      patchVnode(oldCh[oldEndIdx], newCh[newEndIdx])
      oldEndIdx--
      newEndIdx--
    } else if (sameVnode(oldCh[oldStartIdx], newCh[newEndIdx])) {
      patchVnode(oldCh[oldStartIdx], newCh[newEndIdx])
      parentElm.insertBefore(oldCh[oldStartIdx].elm, oldCh[oldEndIdx].elm.nextSibling)
      oldStartIdx++
      newEndIdx--
    } else if (sameVnode(oldCh[oldEndIdx], newCh[newStartIdx])) {
      patchVnode(oldCh[oldEndIdx], newCh[newStartIdx])
      parentElm.insertBefore(oldCh[oldEndIdx].elm, oldCh[oldStartIdx].elm)
      oldEndIdx--
      newStartIdx++
    } else {
      // 创建 key 到 index 的映射
      const idxInOld = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
      const idxInNew = newCh[newStartIdx].key
      
      if (idxInOld[idxInNew]) {
        // 移动节点
        const vnodeToMove = oldCh[idxInOld[idxInNew]]
        patchVnode(vnodeToMove, newCh[newStartIdx])
        oldCh[idxInOld[idxInNew]] = undefined
        parentElm.insertBefore(vnodeToMove.elm, oldCh[oldStartIdx].elm)
      } else {
        // 创建新节点
        createElm(newCh[newStartIdx], parentElm, oldCh[oldStartIdx].elm)
      }
      newStartIdx++
    }
  }
}

Vue3 的 Diff 算法​

Vue3 采用快速 Diff 算法，主要优化点：

function patchKeyedChildren(c1, c2, container) {
  let i = 0
  let e1 = c1.length - 1
  let e2 = c2.length - 1

  // 1. 从头部开始比较
  while (i <= e1 && i <= e2 && c1[i].key === c2[i].key) {
    patch(c1[i], c2[i], container)
    i++
  }

  // 2. 从尾部开始比较
  while (i <= e1 && i <= e2 && c1[e1].key === c2[e2].key) {
    patch(c1[e1], c2[e2], container)
    e1--
    e2--
  }

  // 3. 处理新增和删除的节点
  if (i > e1) {
    // 新增节点
    const nextPos = e2 + 1
    const anchor = nextPos < c2.length ? c2[nextPos].el : null
    while (i <= e2) {
      patch(null, c2[i], container, anchor)
      i++
    }
  } else if (i > e2) {
    // 删除节点
    while (i <= e1) {
      unmount(c1[i])
      i++
    }
  } else {
    // 4. 处理未知序列
    const s1 = i
    const s2 = i
    const keyToNewIndexMap = new Map()
    
    // 建立新子节点的 key 到 index 的映射
    for (let i = s2; i <= e2; i++) {
      keyToNewIndexMap.set(c2[i].key, i)
    }
    
    // 更新和移动节点
    let moved = false
    let maxNewIndexSoFar = 0
    const toBePatched = e2 - s2 + 1
    const newIndexToOldIndexMap = new Array(toBePatched).fill(0)
    
    for (let i = s1; i <= e1; i++) {
      const oldVNode = c1[i]
      const newIndex = keyToNewIndexMap.get(oldVNode.key)
      
      if (newIndex === undefined) {
        unmount(oldVNode)
      } else {
        newIndexToOldIndexMap[newIndex - s2] = i + 1
        if (newIndex >= maxNewIndexSoFar) {
          maxNewIndexSoFar = newIndex
        } else {
          moved = true
        }
        patch(oldVNode, c2[newIndex], container)
      }
    }
    
    // 移动节点
    if (moved) {
      const seq = getSequence(newIndexToOldIndexMap)
      let j = seq.length - 1
      for (let i = toBePatched - 1; i >= 0; i--) {
        const nextIndex = s2 + i
        const nextChild = c2[nextIndex]
        const anchor = nextIndex + 1 < c2.length ? c2[nextIndex + 1].el : null
        
        if (newIndexToOldIndexMap[i] === 0) {
          patch(null, nextChild, container, anchor)
        } else if (moved) {
          if (j < 0 || i !== seq[j]) {
            move(nextChild, container, anchor)
          } else {
            j--
          }
        }
      }
    }
  }
}

3. 主要优化点​

静态标记​

Vue3 引入了静态标记（PatchFlag），用于标记动态内容：

// Vue3 的静态标记示例
const vnode = {
  type: 'div',
  props: {
    id: 'app',
    class: 'container'
  },
  children: [
    {
      type: 'span',
      props: { class: 'text' },
      children: ['Hello'],
      patchFlag: 1 // 表示文本内容可能变化
    }
  ]
}

静态提升​

Vue3 将静态节点提升到渲染函数之外：

// Vue3 的静态提升
const hoisted = createVNode('div', null, '静态内容')

function render() {
  return createVNode('div', null, [
    hoisted,
    createVNode('span', null, state.message)
  ])
}

事件监听器缓存​

Vue3 缓存事件监听器，避免重复创建：

// Vue3 的事件监听器缓存
const render = (ctx) => {
  return createVNode('button', {
    onClick: ctx.onClick // 事件监听器被缓存
  }, '点击')
}

4. 性能对比​

时间复杂度​

  • Vue2: O(n²)
  • Vue3: O(n)

内存占用​

  • Vue2: 较大的内存占用
  • Vue3: 显著减少的内存占用

实际性能提升​

  1. 首次渲染性能提升约 50%
  2. 更新性能提升约 100%
  3. 内存占用减少约 50%

5. 最佳实践​

合理使用 key​

<!-- 推荐：使用唯一且稳定的 key -->
<template v-for="item in items" :key="item.id">
  <div>{{ item.name }}</div>
</template>

<!-- 不推荐：使用索引作为 key -->
<template v-for="(item, index) in items" :key="index">
  <div>{{ item.name }}</div>
</template>

避免不必要的更新​

// 使用 shallowRef 减少响应式开销
const state = shallowRef({
  count: 0,
  user: {
    name: 'John'
  }
})

// 使用 markRaw 标记不需要响应式的对象
const staticData = markRaw({
  config: {
    theme: 'dark'
  }
})

合理使用组件​

<!-- 使用异步组件减少初始加载时间 -->
const AsyncComponent = defineAsyncComponent(() =>
  import('./HeavyComponent.vue')
)

<!-- 使用 keep-alive 缓存组件状态 -->
<keep-alive>
  <component :is="currentComponent" />
</keep-alive>

6. 总结​

Vue3 的 Diff 算法相比 Vue2 有了显著的改进：

  1. 采用快速 Diff 算法，时间复杂度从 O(n²) 降低到 O(n)
  2. 引入静态标记和静态提升，减少不必要的更新
  3. 优化事件监听器，减少内存占用
  4. 提供更多性能优化 API，如 shallowRef、markRaw 等

这些优化使得 Vue3 在性能上有了质的飞跃，特别是在大型应用中，性能提升更为明显。开发者应该充分了解这些优化，并在实际开发中合理运用，以充分发挥 Vue3 的性能优势。