分析
现有框架几乎都引入了虚拟DOM来对真实DOM进行抽象，也就是现在大家所熟悉的vnode和vdom，那么为什么需要引入虚拟DOM呢？
思路
- vdom是什么？
- 引入vdom的好处
- vdom如何生成，又如何成为dom
- 在后续的diff中的作用
总结
1.是什么？
虚拟dom顾名思义就是虚拟的dom对象，它自身就是一个Javascript对象，只不过它是通过不同的属性去描述一个试图结构
2.好处？
通过引入vdom我们可以获得一下好处：
1.将真实元素节点抽象成vnode，可以有效减少直接操作dom次数，从而提高程序性能
- 直接操作dom是有限制的，比如：diff、clone等操作，
一个真实元素上有许多的内容，如果直接对其进行diff操作，会去额外diff一些没有必要的内容，虚拟dom只会放最关键的值。同样的，如果需要进行clone那么需要将其全部内容进行复制，这也是没有必要的。但是如果将这些操作转移到javascript对象上，那么就会变得简单了
// 一个真实元素上有很多的内容
console.dir(document.getElementById("root")) // 可以看到有非常多的属性，内容太多了。自己答应吧
操作dom是比较昂贵的，频繁的dom操作容易引起页面的重绘和回流，但是通过抽象vnode进行中间处理，可以有效减少直接操作dom的次数，从而减少页面重绘和回流。我们直接操作虚拟dom，等所有操作都结束之后，在未来的某个时刻，做一次批量操作，批量操作会做一次diff算法。一次性比对完，形成一个清单，有效减少了操作dom的次数
2.方便实现跨平台
3.如何工作？
在vue中我们常常会为组件编写模板(templete)，这个模版会被编译器(compiler)编译为渲染函数，在接下来的挂载(mount)过程中会调用render函数，返回的对象就是虚拟dom，但是他们还不是真正的dom，所以会在后续的patch过程中进一步进化为dom
挂载过程：
4.后续diff？
在挂载完成之后，vue程序进入更新流程
如果数据发生变化，将会引起组件重新render，此时就会生成新的vdom，和上一次的渲染结果diff就能得到变化的地方，从而可以得到最小量的dom操作，高效更新视图
