实现一个简单的diff算法流程

最新推荐文章于 2026-03-02 14:33:11 发布

原创最新推荐文章于 2026-03-02 14:33:11 发布 · 1.4k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

JavaScript 专栏收录该内容

12 篇文章

订阅专栏

本文深入探讨Vue中虚拟DOM的概念及其重要性，解析VNode类的构成与作用，详述diff算法流程，包括补丁包生成及渲染过程，帮助理解Vue高效更新视图的原理。

vue-diff

实现一个简单的diff算法流程
github：https://github.com/zhenghanhao1999/vue-diff

详解

流程图如下：
在这里插入图片描述

什么是虚拟DOM ？

所谓虚拟DOM，就是用一个JS对象来描述一个DOM节点

为什么要有虚拟DOM ？

Vue是数据驱动视图的，数据发生变化视图就要随之更新，在更新视图的时候难免要操作DOM,而操作真实DOM又是非常耗费性能的，这是因为浏览器的标准就把 DOM 设计的非常复杂，所以一个真正的 DOM 元素是非常庞大的（打印一个空的div所有的key，可能有上百个），直接操作真实DOM就会非常消耗性能。

当数据发生变化时，我们对比变化前后的虚拟DOM节点，通过DOM-Diff算法计算出需要更新的地方，然后去更新需要更新的视图 ，这就是上述问题的解决方案。

VNode类

在vue中（源码），一个虚拟dom节点，具备以下属性：

export default class VNode {
  constructor (
    tag?: string,
    data?: VNodeData,
    children?: ?Array<VNode>,
    text?: string,
    elm?: Node,
    context?: Component,
    componentOptions?: VNodeComponentOptions,
    asyncFactory?: Function
  ) {
    this.tag = tag                                /*当前节点的标签名*/
    this.data = data        /*当前节点对应的对象，包含了具体的一些数据信息，是一个VNodeData类型，可以参考VNodeData类型中的数据信息*/
    this.children = children  /*当前节点的子节点，是一个数组*/
    this.text = text     /*当前节点的文本*/
    this.elm = elm       /*当前虚拟节点对应的真实dom节点*/
    this.ns = undefined            /*当前节点的名字空间*/
    this.context = context          /*当前组件节点对应的Vue实例*/
    this.fnContext = undefined       /*函数式组件对应的Vue实例*/
    this.fnOptions = undefined
    this.fnScopeId = undefined
    this.key = data && data.key           /*节点的key属性，被当作节点的标志，用以优化*/
    this.componentOptions = componentOptions   /*组件的option选项*/
    this.componentInstance = undefined       /*当前节点对应的组件的实例*/
    this.parent = undefined           /*当前节点的父节点*/
    this.raw = false         /*简而言之就是是否为原生HTML或只是普通文本，innerHTML的时候为true，textContent的时候为false*/
    this.isStatic = false         /*静态节点标志*/
    this.isRootInsert = true      /*是否作为跟节点插入*/
    this.isComment = false             /*是否为注释节点*/
    this.isCloned = false           /*是否为克隆节点*/
    this.isOnce = false                /*是否有v-once指令*/
    this.asyncFactory = asyncFactory
    this.asyncMeta = undefined
    this.isAsyncPlaceholder = false
  }

  get child (): Component | void {
    return this.componentInstance
  }
}

通过属性之间不同的搭配，VNode类可以描述出各种类型的真实DOM节点：

注释节点：isComment为true
文本节点：只具备text属性
元素节点：贴近于真实DOM节点，具备节点属性
克隆节点： isCloned为true
组件节点
函数式组件节点

什么是补丁包（patch）？

如果你有仔细看流程图（加载不出来请克隆或者调整网络）

那么你可以看到整个流程是：新的VDOM来了 --> 用diff算法生成补丁包 --> 通过打补丁更新dom

所以补丁包，就是在重新更新视图的时候，告诉Render应该对当前节点进行何种操作

我们在此DEMO中，仅对文本节点、元素节点做条件判断，并且补丁包类型定义为：

// 具备属性的元素节点
// 对应操作：setAttribute、removeAttribute等
const ATTRS = 'ATTRS';
// 文本节点
// 对应操作：直接替换textContent
const TEXT = 'TEXT';
// 应该被移除的节点
// 对应操作：removeChild
const REMOVE = 'REMOVE';
// 应该被替换的节点
// 对应操作：replaceChild
const REPLACE = 'REPLACE';