Vue虚拟DOM的渲染流程是如何基于最小化差异更新实现高效的？

本文共计1555个文字，预计阅读时间需要7分钟。

为什么需要虚拟DOM？

如果对前端工作有所了解，主要就是维护状态和更新视图。而更新视图和维护状态都需要操作DOM。实际上，近年来前端框架的发展方向主要是简化DOM操作，降低其复杂性。

为什么需要虚拟DOM？

　　如果对前端工作进行抽象的话，主要就是维护状态和更新视图，而更新视图和维护状态都需要DOM操作。其实近年来，前端的框架主要发展方向就是解放DOM操作的复杂性。

　　运行js的速度是很快的，大量的操作DOM就会很慢，时常在更新数据后会重新渲染页面，这样造成在没有改变数据的地方也重新渲染了DOM 节点，这样就造成了很大程度上的资源浪费。

　　在jQuery出现以前，我们直接操作DOM结构，这种方法复杂度高，兼容性也较差。有了jQuery强大的选择器以及高度封装的API，我们可以更方便的操作DOM，jQuery帮我们处理兼容性问题，同时也使DOM操作变得简单。

　　但是聪明的程序员不可能满足于此，各种MVVM框架应运而生，有angularJS、avalon、vue.js等，MVVM使用数据双向绑定，使得我们完全不需要操作DOM了，更新了状态，视图会自动更新。更新了视图数据状态也会自动更新，可以说MVVM使得前端的开发效率大幅提升。但是其大量的事件绑定使得其在复杂场景下的执行性能堪忧，有没有一种兼顾开发效率和执行效率的方案呢？由此引入Virtual DOM(虚拟DOM）。

　　利用在内存中生成与真实DOM与之对应的数据结构，这个在内存中生成的结构称之为虚拟DOM 。

　　当数据发生变化时，能够智能地计算出重新渲染组件的最小代价并应用到DOM操作上。