Vue的虚拟DOM

浏览器加载一个HTML文件的大致流程：

1.构建DOM树
2.构建Style Rules，页面的样式表
3.把DOM树和样式表综合起来，形成Render Tree
4.布局，为每个Render树上的节点确定在显示屏上出现的精确坐标值。
5.绘制，调用每个节点的paint方法

JS操作真实DOM的代价

传统的开发模式，原生JS或者JQ操作DOM时，浏览器会从构建DOM树从头到位的执行一边流程，如果我们用循环更新10个DOM节点，浏览器会从第一个dom请求开始执行，连续对DOM进行9次的更新请求，直到执行10次，浪费性能的同时也容易导致页面卡顿，影响用户体验，频繁且复杂的dom操作通常是前端性能瓶颈的产生点，Vue提供了虚拟dom的解决办法。

虚拟DOM的核心思想：对复杂的文档DOM结构，提供一种方便的工具，进行最小化地DOM操作。这句话，也许过于抽象，却基本概括了虚拟DOM的设计思想。

1. 提供一种方便的工具，使得开发效率得到保证
2. 保证最小化的DOM操作，使得执行效率得到保证

也就是说，虚拟dom的框架/工具都是这么做的：

1. 根据虚拟dom树最初渲染成真实dom。
2. 当数据变化，或者说是页面需要重新渲染的时候，会重新生成一个新的完整的虚拟dom。
3. 拿新的虚拟dom来和旧的虚拟dom做对比（使用diff算法），得到需要更新的地方之后，再更新内容。

这样的