虚拟dom深入理解 | vue

Posted 2021-06-21 Cathy的前端技术笔记

【什么是Virtual DOM】

Virtual DOM(虚拟DOM)，在形态上表现为一个能够描述DOM结构及其属性信息的普通的JS对象，因为不是真实的DOM对象，所以叫虚拟DOM。

<div></div>

{ sel: 'div', data: {}, chidren:undefined, elm:undefined, key:undefined,}

Virtual DOM 本质上JS和DOM之间的一个映射缓存。可以类比 CPU 和硬盘，既然硬盘这么慢，我们就在它们之间加个缓存：既然 DOM 这么慢，我们就在它们 JS 和 DOM 之间加个缓存。CPU（JS）只操作内存（Virtual DOM），最后的时候再把变更写入硬盘（DOM）。

【为什么需要Virtual DOM】

• 手动操作DOM比较麻烦，还需要考虑浏览器兼容性问题，虽然有jquery等库简化DOM操作，但是随着项目的复杂DOM操作复杂提升。

• 为了简化DOM的复杂操作于是出现了MVVM框架，MVVM框架解决了视图和状态的同步问题。

• 为了简化视图的操作我们可以使用模板引擎，但是模板引擎没有解决跟踪状态变化的问题,于是Virtual DOM出现了。

• Virtual DOM的好处是当状态改变时不需要立即更新DOM，只需要创建一个虚拟树来描述DOM，Virtual DOM内部将弄清除如何有效(diff)的更新DOM。

• 虚拟DOM可以维护程序的状态，跟踪上一次的状态，通过比较前后两次状态的差异更新真实DOM。

  
  

【Virtual DOM的作用】

1、减少对真实DOM的操作

真实DOM 因为浏览器厂商需要实现众多的规范（各种 html5 属性、DOM事件），即使创建一个空的 div 也要付出昂贵的代价。如以下代码，打印空的div属性一共298个。而这仅仅是第一层。真正的 DOM 元素非常庞大。直接操作DOM可能会导致频繁的回流和重绘。

const div = document.createElement('div');const arr = [];for(key in div){arr.push(key)};console.log(arr.length); // 298

对复杂的文档DOM结构（复杂视图情况下提升渲染性能），提供一种方便的工具，进行最小化地DOM操作。既然我们可以用JS对象表示DOM结构，那么当数据状态发生变化而需要改变DOM结构时，我们先通过JS对象表示的虚拟DOM计算出实际DOM需要做的最小变动（Virtual DOM会使用diff算法计算出如果有效的更新dom，只更新状态改变的DOM），然后再操作实际DOM，从而避免了粗放式的DOM操作带来的性能问题，减少对真实DOM的操作。

2、无需手动操作 DOM，维护视图和状态的关系

我们不再需要手动去操作 DOM，只需要写好 View-Model 的代码逻辑，MVVM框架会根据虚拟 DOM 和 数据双向绑定，帮我们以可预期的方式更新视图，极大提高我们的开发效率。

3、跨平台

虚拟DOM是对真实的渲染内容的一层抽象，是真实DOM的描述，因此，它可以实现“一次编码，多端运行”，可以实现SSR(Nuxt.js/Next.js)、原生应用(Weex/React Native)、小程序(mpvue/uni-app)等。

【Virtual DOM有什么不足】

上面我们也说到了在复杂视图情况下提升渲染性能。虽然虚拟 DOM + 合理的优化，足以应对绝大部分应用的性能需求，但在一些性能要求极高的应用中虚拟DOM 无法进行针对性的极致优化。首次渲染大量DOM时，由于多了一层虚拟DOM的计算，会比innerHTML插入慢。

下方是尤大自己的见解。www.zhihu.com/question/31…