为什么 Angular 没有引入 Vue 的 virtual DOM？

admin管理员组

文章数量:1438943

为什么 Angular 没有引入 Vue 的 virtual DOM？

Angular 里没有虚拟 DOM 的概念。Angular采用的是一套独特的变更检测机制，其工作模型与虚拟 DOM 的思想完全不同。Angular利用 Zone.js 捕捉异步任务的执行情况，通过脏检测系统追踪数据状态的变化，并直接对真实 DOM 进行更新。Angular中的数据绑定与模板编译机制实现了自动同步模型与视图的功能，其工作原理不依赖于构建一份虚拟 DOM 树进行差异比较，也不通过 diff 算法来生成更新补丁。

Angular中的组件模板经过预编译后，会生成高效的更新逻辑，当组件内部数据发生变化时，Angular通过 Zone.js 捕捉异步操作，触发脏检测机制，对组件树进行遍历，检查各个绑定表达式是否与最新数据匹配，若发现不一致，则直接更新对应的真实 DOM 节点。Angular的这一设计避免了虚拟 DOM 树的构建与 diff 计算过程，从而降低了额外的内存消耗和计算开销，提升了整体性能。

Angular允许开发者通过 OnPush 变更检测策略来优化性能，该策略要求只有在输入属性发生变化或组件内部引用类型数据更新时，才触发视图更新。借助 OnPush 策略，Angular不会每次都对整个组件树进行全量检查，而是仅针对标记为需要检查的部分执行更新。这样，开发者可以结合 RxJS 等响应式编程工具，更精确地管理异步数据流，实现对数据更新时机的精细控制。

虚拟 DOM 的理念主要体现在 React 和 Vue 等框架中，其核心思想是构建一份虚拟表示，利用 diff 算法计算新旧虚拟 DOM 之间的差异，再生成最小化的更新补丁，最后将补丁应用到真实 DOM 上。Angular的设计则直接依赖编译后的绑定逻辑，通过脏检测机制直接对真实 DOM 进行更新，不需要额外构建虚拟 DOM 层。因此，虽然两者都旨在降低频繁操作真实 DOM 带来的性能消耗，但实现方式和底层原理存在本质差异。

Angular 的工作流程中，Zone.js 捕捉到异步任务结束后，会调用内部变更检测算法，遍历组件树，依次检查每个绑定表达式的值与数据状态是否一致。一旦检测到变化，Angular便会立即更新对应的真实 DOM 元素。开发者也可以通过手动调用 ChangeDetectorRef.markForCheck() 与 ChangeDetectorRef.detectChanges() 来精确控制检测过程，这种灵活性为性能调优和大型应用开发提供了有力支持。

下面是一份简单的 Angular 示例源代码，展示了基本的数据绑定与变更检测流程。代码中定义了一个组件，该组件内数据更新后，Angular 会自动触发变更检测，直接更新真实 DOM 上显示的内容。整个过程不涉及虚拟 DOM 树的构建，而是依靠预编译后的绑定逻辑实现视图更新。

import { Component } from `@angular/core`;

@Component({
  selector : `app-root`,
  template : `<div>
    <h1>Angular 数据绑定 示例</h1>
    <p>{{ message }}</p>
    <button (click)=`updateMessage()`>更新消息</button>
  </div>`
})
export class AppComponent {
  message = `初始消息`;
  updateMessage() {
    this.message = `更新后的消息`;
  }
}


// 定义一个用于创建虚拟 DOM 节点的函数 h，该函数接受标签、属性、子节点作为参数，返回一个虚拟节点对象  
const h = ( tag , props , children ) => {  
  return { tag , props , children }  
}  

// 定义一个将虚拟 DOM 节点转换为真实 DOM 元素的函数 createElement  
const createElement = vnode => {  
  // 调用 document.createElement 创建元素  
  const el = document.createElement( vnode.tag )  
  // 如果存在属性，则对每个属性进行设置  
  if ( vnode.props ) {  
    for ( let key in vnode.props ) {  
      el.setAttribute( key , vnode.props[ key ] )  
    }  
  }  
  // 如果子节点为字符串，则直接赋值 textContent  
  if ( typeof vnode.children === `string` ) {  
    el.textContent = vnode.children  
  } else if ( Array.isArray( vnode.children ) ) {  
    // 对每个子节点递归调用 createElement，并将结果追加到当前元素中  
    vnode.children.forEach( child => {  
      el.appendChild( createElement( child ) )  
    } )  
  }  
  return el  
}  

// 定义一个简单的 diff 算法函数 diff，用于对比新旧虚拟 DOM 节点，并返回对应的补丁对象  
const diff = ( oldVnode , newVnode ) => {  
  // 如果节点标签不同，则返回替换类型的补丁  
  if ( oldVnode.tag !== newVnode.tag ) {  
    return { type : `REPLACE` , newVnode }  
  }  
  // 当子节点都为字符串时，判断文本是否发生变化  
  if ( typeof oldVnode.children === `string` && typeof newVnode.children === `string` ) {  
    if ( oldVnode.children !== newVnode.children ) {  
      return { type : `TEXT` , text : newVnode.children }  
    } else {  
      return { type : `NONE` }  
    }  
  }  
  // 此处只对简单情况进行判断，对于复杂节点更新可扩展为深度 diff 算法  
  return { type : `UPDATE` }  
}  

// 定义一个 patch 函数，根据补丁对真实 DOM 进行更新操作  
const patch = ( parent , el , patchObj , index = 0 ) => {  
  if ( ! patchObj || patchObj.type === `NONE` ) {  
    return  
  }  
  switch ( patchObj.type ) {  
    case `REPLACE`:  
      // 用新的虚拟 DOM 节点创建出真实 DOM 元素，并替换旧元素  
      parent.replaceChild( createElement( patchObj.newVnode ) , el )  
      break  
    case `TEXT`:  
      // 直接更新文本内容  
      el.textContent = patchObj.text  
      break  
    case `UPDATE`:  
      // 对于 UPDATE 类型，此示例中暂不实现具体更新逻辑  
      break  
  }  
}  

// 示例中构建初始虚拟 DOM 与更新后的虚拟 DOM 表示  
const oldVnode = h( `div` , { id : `app` } , [  
  h( `h1` , null , `虚拟 DOM 示例` ),  
  h( `p` , null , `这是初始状态` )  
] )  

const newVnode = h( `div` , { id : `app` } , [  
  h( `h1` , null , `虚拟 DOM 示例` ),  
  h( `p` , null , `内容已更新` )  
] )  

// 获取页面中用于挂载真实 DOM 的容器元素  
const root = document.getElementById( `root` )  
// 根据初始虚拟 DOM 创建真实 DOM 元素，并追加到容器中  
const realDom = createElement( oldVnode )  
root.appendChild( realDom )  

// 采用 rxjs 来模拟数据更新，利用 interval 产生定时更新事件  
const { interval } = rxjs  
const { take } = rxjs.operators  

// 每3000毫秒后触发一次更新操作，更新 p 标签中的文本内容  
interval( 3000 ).pipe( take( 1 ) ).subscribe( () => {  
  // 对比 oldVnode 与 newVnode 中对应的子节点（此处为 p 标签对象），获取补丁信息  
  const patchObj = diff( oldVnode.children[ 1 ] , newVnode.children[ 1 ] )  
  // 应用 patch，将更新操作反映到真实 DOM 上  
  patch( realDom , realDom.childNodes[ 1 ] , patchObj )  
} )

代码运行时会在页面上显示一个包含标题与段落的结构，经过3000毫秒后，段落中的文本会由这是初始状态更新为内容已更新。这一简单示例演示了如何利用虚拟 DOM 表示视图结构，通过 diff 算法计算更新差异，并通过 patch 函数将变化应用到真实 DOM 上，从而实现数据与视图之间的高效同步。借助 rxjs 提供的响应式编程能力，更新过程可被轻松集成到异步数据流管理中，这种设计模式对大型应用的性能优化与响应性提升具有显著效果。

此设计思想在当今前端开发中得到广泛应用，能够大大降低直接操作真实 DOM 所带来的性能损耗，同时也使开发者更加关注业务逻辑与数据状态管理。虚拟 DOM 的应用不仅存在于 Vue 框架中，React 等框架也采用了类似思路，通过计算差异来实现高效的更新流程。在实际开发中，开发者可根据应用场景选择最适合的渲染机制，权衡开发复杂度与性能表现。

借助虚拟 DOM 的实现，前端开发能够实现更加流畅的用户体验，当数据频繁变化或用户交互强烈时，虚拟 DOM 能够避免过多的直接操作真实 DOM，从而避免由大量重排重绘导致的卡顿问题。同时，利用 rxjs 等响应式编程工具，可以实现数据与视图的解耦，使更新过程更加明确与可控。通过组合虚拟 DOM 与响应式数据流管理，前端框架能够更加灵活地应对复杂应用中的性能优化与状态同步问题。

在高性能应用开发领域，虚拟 DOM 的引入带来的不仅是开发体验的改善，同时也为性能调优提供了一种有效途径。当组件结构复杂或更新频率较高时，传统直接操作真实 DOM 往往难以满足性能需求，而虚拟 DOM 能够通过局部更新、最小化重排重绘，显著改善整体性能。这种思想不仅适用于浏览器环境，也可在移动端、服务器渲染等多种场景下实现高效率的渲染方案。

通过上述示例以及原理分析，可以清楚看到虚拟 DOM 的优势与设计思想。其关键在于利用内存中的 JavaScript 对象作为 DOM 结构的表示，进而利用 diff 算法快速定位更新差异，最后通过 patch 机制将差异部分更新到真实 DOM 上。此模型在大型应用开发中展现出极高的效率与扩展性，使前端框架能够更加灵活地应对数据频繁变化带来的性能挑战。

本文标签： 为什么 Angular 没有引入 Vue 的 virtual DOM