Vue 2.x | Patch 机制概述及运作流程分析

2023-10-01 21:04:26







## Vue 2.x 中的 Patch 机制概述

在 Vue 2.x 中，Patch 机制是虚拟 DOM 最核心的部分，它负责将 vnode 渲染成真实 DOM。与直接操作真实 DOM 相比，Patch 机制具有显著的优势，它可以通过对比新旧 vnode 之间的差异，仅更新需要修改的节点，从而提高渲染效率并优化性能。

## Vue 2.x 中 Patch 机制的运作流程分析

Patch 机制的运作流程通常分为以下几个步骤：

1. **对比新旧 vnode** ：首先，它会将新旧 vnode 进行对比，找出它们之间的差异。
2. **生成 patch** ：在对比之后，它会生成一个 patch，其中包含需要更新的节点及其更新操作（例如：新增、删除、更新）。
3. **应用 patch** ：最后，它将 patch 应用到真实 DOM 中，从而完成虚拟 DOM 的更新。

## Patch 机制在 Vue 2.x 中的应用实例

下面是一个 Patch 机制在 Vue 2.x 中的应用实例：

```javascript
// 假设我们有一个 vnode
const oldVnode = {
  tag: 'div',
  props: {
    id: 'app'
  },
  children: [
    {
      tag: 'p',
      props: {
        textContent: 'Hello World'
      }
    }
  ]
};

// 我们对 vnode 做出了一些改动
const newVnode = {
  tag: 'div',
  props: {
    id: 'app'
  },
  children: [
    {
      tag: 'p',
      props: {
        textContent: 'Hello Vue'
      }
    }
  ]
};

// 创建一个 patch
const patch = diff(oldVnode, newVnode);

// 将 patch 应用到真实 DOM 中
patch(document.getElementById('app'));