理解虚拟DOM
作者：互联网
什么是虚拟DOM
虚拟DOM是对真实DOM的抽象，它表现为一个JavaScript对象，该对象的属性存储了某个节点所包含的信息，如标签名、标签用到的HTML属性、子元素对象等，来描述一个DOM元素，存储在内存中。每次页面重新渲染时，会先使用VNode类去实例化不同类型的DOM节点，生成vnode实例，然后与上一次渲染视图时缓存的vnode进行对比，找出不同的地方，基于此去修改真实DOM，这里新旧两个vnode的对比使用了Diff算法。虚拟DOM本质上是使用了JavaScript的运算成本来替换直接操作DOM元素的成本，因此DOM操作的执行速度是很慢的，远不如JavaScript的运算速度。
在Vue2中选择了中度粒度来实现状态的变化侦测，所谓“中度”指的是数据的订阅者Watcher是组件级别的，不再往下细分（组件内可能有多个DOM节点使用了该状态），当状态改变时，只通知到组件，然后组件内部通过虚拟DOM去比对进行渲染。
如何拿到虚拟DOM
在虚拟DOM之前还涉及到模板编译的过程，Vue需要将我们编写的模板语法编译成虚拟DOM的渲染函数。
模板编译过程：
- 将模板解析为抽象语法树(AST)：借助HTML解析器，构建出不同的节点；
- 遍历AST标记静态节点：这是优化过程，因为静态节点不会变化，那么在重新渲染时就不用为它们创建新的vnode，直接复制即可，同时在使用Diff算法比对时也可以跳过这些静态节点；
- 使用AST生成渲染函数：通过代码生成器将AST转换为代码字符串，作为渲染函数的内容。渲染函数执行后生成vnode，虚拟DOM就可以通过这个vnode渲染视图
标签：DOM,渲染,理解,vnode,AST,虚拟,节点 来源： https://www.cnblogs.com/evil-shark/p/16550494.html