宏观理解Vue的工作过程

Vue工作程序主要的工作步骤

1）把模板解析成AST(抽象语法树)
2）由AST生成的Vue render函数(渲染函数：渲染生辰页面)
3）每当数据变化时，把数据项代入渲染函数生成虚拟DOM
4）根据数据变化前后虚拟DOM的不同来更新真实的DOM

关键字

1） 模板：vue 的模板标签基于纯html，基于vue的模板语法，可以比较方便的声明数据和UI之间的关系(template标签下的内容；el指定的内容)

2）AST：是Abstract Syntax Tree(抽象语法树)的简称，Vue使用html的parser将HTML模板解析为AST，并且对AST进行一些优化的标记处理，提取最大的静态树，方便虚拟DOM时直接跳过Diff。

3）渲染函数：渲染函数就是用来生成虚拟DOM的。
vue推荐使用模板来构建我们的应用界面，在底层实现中vue会将模板编译成渲染函数，当然我们也可以不写模板，直接写渲染函数，以获得更好的控制。
i）vue通过你提供的template来自动生成
ii）直接指定render配置项

4）虚拟DOM： 虚拟DOM就是使用js的对象模拟真实的DOM，当状态(data)发生变化时，更新之前做的diff(对比新旧虚拟DOM)，达到最少操作DOM的效果。vue的虚拟DOM
好处：
i）快
访问DOM很“昂贵”，会造成相当多的性能浪费。
当某个数据发生变化时，只更新与这个状态相关联的DOM节点。虚拟DOM就是解决方案之一。
ii）跨
虚拟DOM可以跨平台。(vue可以在没有浏览器的场景中运行)
5）Watcher：每个vue组件都有一个对应的watcher，在组件render的时候手机组件所依赖的数据，并在依赖有更新的时候，触发组件重新渲染。

通过render函数把整个过程分为两个部分

i）编译期：将vue的模板转换为渲染函数
ii）运行时：主要基于渲染函数生成虚拟DOM树，实时监测数据变化，变化了，就重新渲染调渲染函数生成新的虚拟DOM，并与旧虚拟DOM树相比，找出区别，更新到真实DOM上。

总结

template，el ====>生成渲染函数
渲染函数 + 当前数据 ====>虚拟DOM
虚拟DOM ====> 真实DOM