vue虚拟Dom详解

1. 什么是虚拟dom？

虚拟dom本质上是一个js对象，用来描述视图的界面结构，在vue中，每个组件都有一个render函数，每个render函数都会返回一个虚拟dom树，这意味着每个组件都对应着一颗虚拟dom树

2. 为什么需要虚拟dom？

在vue中，渲染视图会调用render函数，这种渲染不仅发生在组件创建的时候，还发生在视图依赖的数据更新的时候，如果在渲染时，直接使用真实dom，由于真实dom的创建，更新，插入会带来大量的性能消耗，从而就会极大地降低渲染效率，因此，vue在渲染时，使用虚拟dom来替代真实dom主要是解决渲染效率的问题

3. 虚拟dom是如何转换为真实dom的？

每个组件实例首次被渲染时，首先会生成虚拟dom树，然后根据虚拟dom树创建真实dom，再把真实dom挂载到页面合适的地方，此时，每个虚拟dom树对应一个真实dom

当组件受响应式数据变化的影响，需要重新渲染，就会重新调用render函数，生成一个新的虚拟dom树，然后用新的虚拟dom树跟旧的虚拟dom树做比较，通过对比，vue会找到最小更新量，然后更新必要的虚拟dom节点，最后，这些更新过的虚拟dom节点，会去修改它们对应的真实dom，这样一来，就保证了真实dom的达到了最小的改动

4. 模板和虚拟dom的关系

vue框架中有一个compile，compile主要负责将模版转化为render函数，而render函数调用后得到虚拟dom树
编译的过程分两步：

1. 将模版字符串转化给AST
2. 将AST转化为render函数

如果是传统的引入方式，则编译时间发生在组件第一次加载的时候，称之为运行时编译

如果是在vue-cli的默认配置下，编译发生在打包时，称之为模版预编译

编译是个极其耗费性能的过程，预编译可以有效提高运行时的性能，而且，由于运行时不需要再编译了，这时的vue-cli会在打包时排除掉compile模块，以减少打包体积

模版的存在，仅仅是让开发人员更加方便的书写界面代码

vue最终运行的时候，最终需要的是render函数，而不是模版，因此，模版中的各种语法都不存在的，会被编译成虚拟dom的配置