Vue生命周期函数详解

前言

刚开始学Vue的时候对它的8个生命周期函数很是费解，稀里糊涂的搞不清它们的概念以及什么时候该用什么钩子函数，本篇文章将详细分解这8个钩子函数。

---

首先上两张图[官方文档的图 我做了一些标注]

如果你仔细的看了上图的话 相信你已经明白点什么了 如果你没看上图就请往下看

1. beforeCreated: 在beforeCreated函数执行时，vue实例以及data和methods都还未初始化
2. created: 在该函数执行时，data和methods都已经被初始化好了，如果要调用methods中的方法或者操作data中的数据，最早只能在Created函数中进行
3. beforeMount: 在该函数执行时，模板(虚拟DOM)已经在内存中编译好了，但是尚未挂载到页面中去，此时的页面还是旧的
4. mounted: 执行到此，说明Vue实例已经初始化完毕了，此时组件已经脱离创建阶段进入到了运行阶段
5. beforeUpdate: 当执行到此函数时，页面中的数据还是之前的老数据，但是这个时候的data中的数据时新的，只是尚未和页面保持同步
6. updated: 执行到这个函数时，页面和data中的数据已经保持同步了，都是最新的数据
7. beforeDestory: 当执行到此函数时，Vue实例已经从运行阶段进入到了销毁阶段，但是此时实例身上的所有data数据和methods方法及其他指令等等 都处于可用状态，还没有真正执行销毁过程
8. destoryed: 执行到destoryed函数时，组件已经被完全销毁了，此时所有的data数据和methods方法等 都已经不可用了

总结：

Vue.js中的这八个生命周期函数很重要，一定要搞明白，本文只是自己的一些看法，如果有不对的地方，还请您斧正。