vue中的虚拟DOM

Vue2.0引入了虚拟DOM，比Vue1.0的初始渲染速度提升了2~4倍，并大大降低了内存消耗。 虚拟DOM的提出 在早期的时候，页面的交互比较简单，没有复杂的状态需要管理，更不需要频繁的操作DOM；但随着页面的功能越来越多，客户的需求越来越复杂，DOM 的操作也越来越频繁。而每当操作DOM的时候，会引起页面的回流以及重绘，增加浏览器的消耗，降低了页面的渲染速度，从而降低了浏览器的性能。虚拟DOM的应用可以减少对DOM元素的操作，从而提升浏览器的性能。 模板转换成视图的过程 Vue.js通过编译将模板转换成渲染函数（render），执行渲染函数就可以得到一个虚拟DOM 在对模型进行操作的时候，会触发对应的Dep中的Watcher对象。Watcher对象会调用对应的update来修改视图。这个过程主要是将新旧DOM进行差异对比，然后根据结果进行对比。 总之，Vue将模板编译成虚拟DOM渲染函数。结合Vue自带的响应系统，在状态改变时，Vue能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上。 转换过程 针对上图补充说明几个概念 渲染函数：渲染函数是用来生成虚拟DOM的。 vnode虚拟节点：它可以代表一个真实的DOM节点，通过createElement方法能够将vnode渲染成DOM节点。简单地说，虚拟节点可以理解成节点描述对象，它描述了应该怎样去创建真实的DOM节点。 patch（也称为patching算法）：虚拟DOM最核心的部分，它可以将vnode渲染成为真实的DOM，这个过程是对比新旧虚拟节点之间有哪些不同，然后根据对比结果找出需要更新的节点进行更新。而patch本身就有补丁，修补的意思，其实际作用是在现有DOM上进行修改来实现更新视图的目的。

本文章由javascript技术分享原创和收集