图示

上图是Vue官方给的生命周期图示，该图贯穿全文，先浏览一下，咱们一步步的来
（本文不涉及源码分析，因为本人也不太懂源码，只是相当于做个笔记，恳求大佬补充或纠错）

beforeCreate 调用前： new Vue()

Vue是一个简单的构造函数，调用之后

合并配置
初始化生命周期
初始化事件中心
初始化渲染

完成后调用第一个生命周期钩子：beforeCreate

created 调用前：

初始化 inject
初始化 props , methods , data , computed , watch
初始化 provide

完成后调用：created

可见，created 调用时，数据已经初始化好了，一般在这个钩子里进行网络请求

beforeMount 调用前：

检查有无 el 选项，若没有 el 选项，生命周期会停止，等待手动调用 $mount(el)
若有 el 选项，则检查有无 template 选项，若有则将 template 编译成 render 函数，若没有则将 el 的outHTML 属性的值（是个字符串）作为模板，随后编译成 render 函数

来一步步的验证一下：

没有 el 且没有调用 $mount() 的情况，生命周期到 created 就结束了，如下图可以看到 beforeMount 没有被调用

之后我们手动调用 $mount(el) ，生命周期恢复正常

有 el 的情况，检查有无 template ，若有，则将 template 编译成 render 函数，经一系列步骤（稍后阐述）后渲染成真实DOM

可以看到 template 替换掉了初始的 id 为 app 的 Div

若没有 template ，则将el的 outerHTML 属性的值作为 template

直接使用render函数：

除了通过 el ，template ，也可以直接写成 render 函数,特别是在开发的时候（脚手架构建），因为开发版本是Runtime Only，不带有 Compiler ，编译操作是通过 vue-loader 完成的

下面看下一直接使用 render 函数的效果：

优先级问题 ：

render > template > el

根据上面的讲述，这个结论已经是不证自明了

验证小总结：

el 是必须要有的，它提供了一个页面上已经存在的 DOM 元素作为 Vue 实例的挂载目标，不然连目标都没有，也没必要创建一个 Vue 实例了。至于 template ，它也是要有的，如果没有提供 template 选项，还是会找到el 的 outerHTML 属性作为 template ，template 和 el.outerHTML 的值都是模板字符串，目的就是为了编译成 render 函数，当然，最后也说了，可以直接使用 render ，特别是在开发版本中，必须要使用 render 。

说了这么多，beforeMount 这个钩子调用前，主要是通过编译确保得到 render 函数，下一步就好将虚拟 DOM 变成真实 DOM 了

所以，不开玩笑的说，beforeMount 钩子好像没有什么实质性的作用，在里面写代码好像也没有啥意义(个人愚见)

此时，beforeMount 调用，进行下一步