Vue2中的AST与虚拟DOM详解：从模板编译到Diff算法-CSDN博客

本文链接：https://blog.csdn.net/qq_51757896/article/details/149708225

一、AST与虚拟DOM的概念解析

在Vue.js 2.x版本中，AST（抽象语法树）和虚拟DOM（Virtual DOM）是两个核心概念，它们在Vue的模板编译和渲染过程中扮演着不同但相互关联的角色。

1.1 AST（抽象语法树）

AST是Abstract Syntax Tree的缩写，它是源代码语法结构的一种抽象表示。在Vue中，AST是通过解析模板字符串生成的中间数据结构。

AST的特点：

是模板编译过程的中间产物
直接来源于模板的解析
保留了模板的完整结构信息
不包含任何与DOM相关的信息
主要用于生成渲染函数

AST的生成过程：

模板字符串被解析器解析
生成解析树（Parse Tree）
转换为抽象语法树（AST）

1.2 虚拟DOM（Virtual DOM）

虚拟DOM是真实DOM的轻量级JavaScript对象表示。Vue使用虚拟DOM来避免直接操作真实DOM，从而提高性能。

虚拟DOM的特点：

是内存中的JavaScript对象
与真实DOM结构相似但更轻量
包含标签名、属性、子节点等信息
用于与旧虚拟DOM比较（Diff算法）
最终用于更新真实DOM

虚拟DOM的生成过程：

通过渲染函数执行生成
基于AST生成的代码创建
每次数据变化时重新生成

1.3 AST与虚拟DOM的关键区别

特性	AST	虚拟DOM
产生阶段	编译阶段	运行时阶段
数据来源	直接来自模板解析	来自渲染函数执行
用途	用于生成渲染函数	用于Diff比较和DOM更新
结构	反映模板语法结构	反映DOM节点结构
生命周期	编译后不再使用	每次渲染都会生成新的实例
包含信息	指令、插值等模板特性	元素类型、属性、子节点等DOM信息

二、Vue2的模板编译过程

理解AST和虚拟DOM的关系，需要了解Vue2的完整模板编译流程：

2.1 完整编译流程

模板解析：将模板字符串解析为AST
优化处理：对AST进行静态标记和优化
代码生成：将AST转换为渲染函数代码
渲染执行：执行渲染函数生成虚拟DOM
Diff比较：新旧虚拟DOM比较
DOM更新：将差异应用到真实DOM

2.2 从模板到AST的转换示例

考虑以下简单模板：

<div id="app">
  <p>{{ message }}</p>
</div>

对应的AST结构大致如下：

{
  type: 1, // 节点类型：1-元素节点，2-带变量的文本节点，3-纯文本节点
  tag: 'div',
  attrsList: [{ name: 'id', value: 'app' }],
  attrsMap: { id: 'app' },
  children: [{
    type: 1,
    tag: 'p',
    attrsList: [],
    attrsMap: {},
    children: [{
      type: 2,
      expression: '_s(message)',
      text: '{{ message }}'
    }]
  }]
}

2.3 从AST到渲染函数

上述AST会被转换为类似下面的渲染函数代码：

function render() {
  with(this) {
    return _c('div', { attrs: { "id": "app" } }, [
      _c('p', [_v(_s(message))])
    ])
  }
}

其中：

_c: 创建虚拟DOM元素
_v: 创建虚拟DOM文本节点
_s: 转换为字符串

三、Render函数详解

3.1 Render函数的作用

Render函数是Vue组件渲染的核心，它负责：

根据当前组件状态生成虚拟DOM
提供完全编程式的视图声明方式
作为模板编译的最终产物
在每次数据变化时重新执行

3.2 Render函数的返回值

Render函数必须返回一个虚拟DOM节点，通常是使用createElement函数（通常简写为h或_c）创建的。

基本结构：

render: function(createElement) {
  return createElement(
    'div',   // 标签名
    {},      // 数据对象（属性、样式等）
    []       // 子节点数组
  )
}

3.3 createElement参数详解

createElement接受三个参数：

标签名（必填）：
- 可以是HTML标签名
- 可以是组件选项对象
- 可以是异步组件函数

数据对象（可选）：

{
  // 与v-bind:class相同的API
  class: { foo: true, bar: false },
  // 与v-bind:style相同的API
  style: { color: 'red', fontSize: '14px' },
  // 普通的HTML属性
  attrs: { id: 'foo' },
  // 组件prop
  props: { myProp: 'bar' },
  // DOM属性
  domProps: { innerHTML: 'baz' },
  // 事件监听器
  on: { click: this.clickHandler },
  // 仅用于组件，用于监听原生事件
  nativeOn: { click: this.nativeClickHandler },
  // 自定义指令
  directives: [{
    name: 'my-custom-directive',
    value: '2',
    expression: '1 + 1',
    arg: 'foo',
    modifiers: { bar: true }
  }],
  // 作用域插槽
  scopedSlots: {
    default: props => createElement('span', props.text)
  },
  // 如果组件是其他组件的子组件，需为插槽指定名称
  slot: 'name-of-slot',
  // 其他特殊顶层属性
  key: 'myKey',
  ref: 'myRef'
}

子节点（可选）：
- 可以是字符串（创建文本节点）
- 可以是数组（包含多个子节点）
- 可以使用this.$slots访问静态插槽内容

3.4 渲染函数示例

render: function (createElement) {
  return createElement(
    'div',
    {
      attrs: {
        id: 'container'
      },
      style: {
        color: '#333',
        fontWeight: 'bold'
      }
    },
    [
      createElement('h1', '标题'),
      this.showSubtitle ? 
        createElement('h2', '副标题') : 
        createElement('p', '暂无副标题'),
      createElement('ul', 
        this.items.map(item => 
          createElement('li', item.name)
        )
      )
    ]
  )
}

四、Diff算法深度解析

4.1 Diff算法概述

Diff算法是虚拟DOM实现高效更新的核心，Vue2的Diff算法基于Snabbdom算法优化而来，主要特点是：

同级比较（不跨层级比较）
双端比较（同时从新旧节点的两端开始比较）
key的重要性（通过key识别可复用的节点）

4.2 Diff算法的基本流程

预处理：
- 跳过相同节点（新旧节点引用相同）
- 处理文本节点和注释节点的快速更新
节点比较：
- 新旧节点都有子节点时，进入核心Diff流程
- 一方有子节点一方没有时，直接添加或删除
核心Diff（updateChildren方法）：
- 新旧子节点数组各设置头尾指针
- 四种比较方式：
  1. 旧头 vs 新头
  2. 旧尾 vs 新尾
  3. 旧头 vs 新尾
  4. 旧尾 vs 新头
- 如果四种比较都不匹配，则尝试用key查找可复用节点
收尾处理：
- 新节点有剩余则添加
- 旧节点有剩余则删除

4.3 Diff算法的关键优化策略

key的作用：
- 帮助算法识别哪些节点可以复用
- 稳定的key可以提高Diff效率
- 不稳定的key（如index）可能导致性能下降
静态节点提升：
- 编译时标记静态节点
- Diff时跳过静态子树比较
双端比较优势：
- 处理常见操作（头尾添加/删除）更高效
- 减少不必要的DOM操作

4.4 Diff算法源码解析（简化版）

function updateChildren(parentElm, oldCh, newCh) {
  let oldStartIdx = 0
  let newStartIdx = 0
  let oldEndIdx = oldCh.length - 1
  let oldStartVnode = oldCh[0]
  let oldEndVnode = oldCh[oldEndIdx]
  let newEndIdx = newCh.length - 1
  let newStartVnode = newCh[0]
  let newEndVnode = newCh[newEndIdx]
  let oldKeyToIdx, idxInOld, vnodeToMove, refElm

  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
    if (!oldStartVnode) {
      oldStartVnode = oldCh[++oldStartIdx]
    } else if (!oldEndVnode) {
      oldEndVnode = oldCh[--oldEndIdx]
    } else 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 {
      if (!oldKeyToIdx) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
      idxInOld = oldKeyToIdx[newStartVnode.key]
      if (!idxInOld) {
        createElm(newStartVnode, parentElm, oldStartVnode.elm)
      } else {
        vnodeToMove = oldCh[idxInOld]
        if (sameVnode(vnodeToMove, newStartVnode)) {
          patchVnode(vnodeToMove, newStartVnode)
          oldCh[idxInOld] = undefined
          parentElm.insertBefore(vnodeToMove.elm, oldStartVnode.elm)
        } else {
          createElm(newStartVnode, parentElm, oldStartVnode.elm)
        }
      }
      newStartVnode = newCh[++newStartIdx]
    }
  }
  
  if (oldStartIdx > oldEndIdx) {
    addVnodes(parentElm, newCh[newEndIdx + 1] ? newCh[newEndIdx + 1].elm : null, newCh, newStartIdx, newEndIdx)
  } else if (newStartIdx > newEndIdx) {
    removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx)
  }
}

4.5 Diff算法性能优化建议

合理使用key：
- 使用唯一且稳定的值作为key
- 避免使用index或随机数作为key
减少动态节点数量：
- 将静态内容提升到父组件
- 使用v-once标记不会改变的节点
避免不必要的组件重新渲染：
- 合理使用shouldComponentUpdate或v-once
- 对复杂组件使用v-if替代v-show
扁平化数据结构：
- 减少嵌套层级
- 简化数据更新路径

五、总结

Vue2的模板编译和渲染机制是一个从AST到虚拟DOM再到真实DOM的完整链条。AST作为编译阶段的中间产物，承载了模板的结构信息；而虚拟DOM作为运行时的核心概念，实现了高效的DOM更新。Render函数是连接这两者的桥梁，它将组件的状态转换为虚拟DOM描述。Diff算法则是虚拟DOM实现高效更新的关键，通过同级比较、双端比较和key优化等策略，最小化DOM操作，提升应用性能。

理解这些底层机制，不仅能帮助我们更好地使用Vue框架，还能在性能优化和问题排查时提供有力支持。在实际开发中，我们应该根据这些原理，合理设计组件结构，优化数据更新方式，从而构建出更高效的Vue应用。