el & data 在创建 vue 实例的时候，传入了 el 和 data 选项。vue 内部会把 data 中的数据 el 指向的模版中，并把模版渲染到浏览器；
render & $mount 使用 vue-cli 创建的结构都是这种形式，render 方法接受一个参数，这个参数是 h 函数它的作用是创建虚拟Dom，render 方法把 h 创建的虚拟 Dom 返回。$mount方法的作用是把虚拟 Dom 转化成真实 Dom 渲染到浏览器。
在创建 Vue 实例的过程 new Vue() 中会发生很多事情:
首先会进行初始化
Init 在这里会初始化事件 Events 、 生命周期相关的成员 Lifecycle，比如 h 函数；
接下来会触发生命周期的 beforeCreate 钩子函数；
beforeCreate 执行完毕之后进入初始化注入 Init injections & reactivity 的操作,这里会把 props、methods、data等一些成员注入到 vue的实例上；
然后会触发 created 钩子函数，因为props、methods、data这些成员都已被初始化，所以在这个钩子函数中就可以访问到这些成员；
到此 vue 创建完毕；
图中接下来做的事情是把模版编译成 render 函数：
首先是判断选项中是否设置了 el 选项，如果没有设置就调用 $mount 方法，$mount 方法其实就是将 el 转换成 template;
接下来就是将模版转化成 render 函数，首先是判断是否设置了template选项，如果没有设置会将 el 的外层 HTML 作为模版并把 template编译到渲染函数当中，渲染函数就是用来生成虚拟 DOM 的；
接下来开始准备挂在 DOM ，首先会触发 beforeMount 钩子函数，也就是挂载之前执行的钩子函数，在这个函数中是无法获取新元素的内容的；
再往下准备挂载 DOM，接下来把新的结构渲染到页面上，然后触发 mounted 钩子函数，这里就可以访问到新的 DOM 结构中的内容；
挂载完毕之后，再修改 data 成员中的内容的时候，首先会触发 beforeUpdate 钩子函数，然后会进行新旧两个虚拟 DOM 的对比，并把差异重新渲染到浏览器当中，最后触发 updated 这个钩子函数；
在 beforeUpdate 钩子函数中如果直接访问浏览器当中的渲染内容还是上一次的结果，如果想要获取页面中的最新结果应该在 updated 这个钩子函数中；
最后是销毁阶段，当调用 vm.$distroy()首先会触发beforeDistroy钩子函数，然后执行一些清理的工作，最后会触发 distroied 钩子函数。
