在创建vue实例时Vue.js 生命周期详解

在我们创建vue实例时在Vue.js 的生命周期中会发生很多事情：

1. 首先进行初始化，初始化事件、生命周期相关的成员，包括h函数都是在这个阶段是初始化的。

2. 然后触发beforecreate这个钩子函数。

3. 在beforecreate执行完毕后，会触发注入&校验的操作。把data、methods、props这些成员注入到vue的实例上。

4. 接着会触发created钩子函数，在created钩子函数中可以访问到data,methods,props这些成员，直到这个vue实例创建完毕。

5. 然后就是把模板编译成render函数。
   先判断选项中是否设置了el选项，如果没有设置el选项就调用$mount()这个方法，$mount()把el转换成template，把模板编译到render函数。

6. 再往下就判断是否设置了template模板。
   如果没有设置template模板，就把el元素的外层html作为template模板，然后把template模板编译到render函数当中(render函数就是用来返回虚拟dom的)。如果有设置template模板，就把template模板编译到render函数当中。

7. 下一步是挂载dom。
   首先触发beforemount钩子函数，也就是挂载之前所执行的钩子函数。在这个函数中无法获取新元素的内容。挂载dom，把新的结构渲染到页面上。

8. 然后触发mounted钩子函数，在这个钩子函数中，可以访问到新的dom结构中的内容。挂载完毕后，去修改data中的成员时，首先触发**beforeupdate这个钩子函数，然后再进行新旧两个虚拟dom的对比，把差异重新渲染到浏览器中。**在beforeupdate钩子函数中，如果直接访问浏览器中渲染的内容，还是上一次的结果

9. 触发updated钩子函数。
   我们想要获取最新的数据结果，就应该在update这个钩子函数中进行访问。

10. 销毁阶段，调用vm.$destroy()这个钩子时，会触发beforeDestroy这个钩子函数。
    执行清理的工作。比如解除绑定，销毁子组件以及事件监听器。

11. 最后触发destroyed这个钩子函数

在项目中如果我们使用的是单文件组件，模板编译是在打包或者构建的时候完成的，不在运行时处理模板编译的工作，vue始终推荐我们去提前编译模板，这样的话性能会比较好。因为我们不需要在运行期间去编译模板。