渐进式框架的大概意思就是你可以只用我的一部分，而不是用了我这一点就必须用我的所有部分。

勿喷！ 快乐与知识并存！ 嘻嘻！

初始化及挂载

在new  vue() 之后。 Vue 会调用 _init 函数进行初始化 也就是这里的init 过程，它会初始化生命周期，事件，props，methods,data,compited与watch等。其中最重要的是通过Object.defineProperty 设置setter 与getter 函数 ，用来实现[响应式]以及【依赖收集】

初始化之后 调用￥mount会挂载组件  如果运行时编译 即不存在render function 但是存在 template 的情况，需要进行【编译】步骤

编译

compile编译可以分成 parse ( 解析) optimize（优化） 与generate （生成） 三个阶段  最终到(渲染)render function。

parse 

        会用正则等方式解析 template 模板中的指令，class style 等数据  ，形成AST

    拓展：

 什么是AST在Vue的mount过程中，template会被编译成AST语法树，AST是指抽象语法树（abstract syntax tree或者缩写为AST），或者语法树（syntax tree），是源代码的抽象语法结构的树状表现形式。Vue源码中虚拟DOM构建经历 template编译成AST语法树 -> 再转换为render函数 最终返回一个VNode(VNode就是Vue的虚拟DOM节点) 

optimize 

            optimize的主要作用是标记static 的节点，在编译过程有某处的优化，而且在更新页面是会有path的过程

有diff的算法  减少比较  优化patch的性能

generate是最终将抽象语法树（abstract syntax tree或者缩写为AST）转化为render function 的过程 

当我们有了这个虚拟的树之后，再交给一个patch函数，负责把这些虚拟DOM真正施加到真实的DOM上 。在这个过程中，Vue有自身的响应式系统来侦测在渲染过程中所依赖到的数据来源。在渲染过程中，侦测到的数据来源之后，之后就可以精确感知数据源的变动。到时候就可以根据需要重新进行渲染。当重新进行渲染之后，会生成一个新的树，将新树与旧树进行对比，就可以最终得出应施加到真实DOM上的改动。最后再通过patch函数施加改动。

 vue的依赖追踪通过ES5的 Object.defineProperty 方法实现。比如，我们给它一个原生对象，Vue会遍历这个数据对象的属性，然后进行属性转换。每一个属性会被转换为一个 getter 和一个 setter。同时每个组件会有一个对应的 watcher 对象，这个对象的职责就是在当前组件被渲染的时候，记录数据上面的哪些属性被用到了。

经历：

        当某个数据属性被用到时，触发 getter，这个属性就会被作为依赖被 watcher 记录下来。

        整个函数被渲染完的时候，每一个被用到的数据属性都会被记录。

        相应的数据变动时，例如给它一个新的值，就会触发 setter，通知数据对象对应数据有变化。

        此时会通知对应的组件，其数据依赖有所改动，需要重新渲染。

        对应的组件再次调动渲染函数，生成 Virtual DOM，实现 DOM 更新

作者：peng凯
链接：https://www.jianshu.com/p/86cc7d100f31
來源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。