借用网上找的图
new Vue
合并配置，初始化生命周期，初始化事件，初始化 render，初始化 methods
初始化 data,初始化 data 后调用 observer双向绑定
observe 会通过 defineReactive 对 data 中的对象进行双向绑定，最终通过 Object.defineProperty 对对象设置 setter 以及 getter 的方法。getter 的方法主要用来进行依赖收集。setter 方法会在对象被修改的时候触发（不存在添加属性的情况，添加属性请用 Vue.set），这时候 setter 会通知闭包中的 Dep，Dep 中有一些订阅了这个对象改变的 Watcher 观察者对象，Dep 会通知 Watcher 对象更新视图。
初始化 computed,wacther 等
初始化之后，如果检测到 el 属性，调用 vm.$mount 方法挂载 vm，mount 组件
模板和数据如何渲染成最终的 DOM
Vue 提供了两个版本，一个是 Runtime+Compiler 版本的，一个是 Runtime only 版本的。Runtime+Compiler 是包含编译代码的，可以把编译过程放在运行时来做。而 Runtime only 是不包含编译代码的，所以需要借助 webpack 的 vue-loader 来把模版编译成 render 函数。在实际开发当中，我们通常在组件中采用的是编写 template 模版。编译主要有三个过程：
解析模版字符串生成 AST
AST（在计算机科学中，抽象语法树（abstract syntax tree 或者缩写为 AST），或者语法树（syntax tree），是源代码的抽象语法结构的树状表现形式，这里特指编程语言的源代码。）
vue-loader 用正则等方式解析 template 模板中的指令、class、style 等数据，形成 AST 树。AST 是一种用 Javascript 对象的形式来描述整个模版，整个 parse 的过程就是利用正则表达式来顺序地解析模版，当解析到开始标签，闭合标签，文本的时候会分别对应执行响应的回调函数，从而达到构造 AST 树的目的。
optimize：优化 AST 语法树
Vue 是数据驱动，是响应式的，但是 template 模版中并不是所有的数据都是响应式的，也有许多数据是初始化渲染之后就不会有变化的，那么这部分数据对应的 DOM 也不会发生变化。后面有一个 update 更新界面的过程，在这当中会有一个 patch 的过程， diff 算法会直接跳过静态节点，从而减少了比较的过程，优化了 patch 的性能。
codegen：将优化后的 AST 树转换成可执行的代码。
template 模版经历过 parse->optimize->codegen 三个过程之后，就可以 d 得到 render function 函数了
[越努力，越幸运！]