随着对 vue 的不断了解，会越来越发现它生命周期的重要性，只有了解了它的生命周期，才能在开发项目的时候在逻辑上的很好的判断什么时候该发生什么事件，即很好的控制页面。
 
 
一、什么是 vue 生命周期
 
Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。下面是官网中的生命周期照片
 
 
二、生命周期函数
 
Vue 的生命周期总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。
 
1、beforeCreate（创建前）
 
表示实例完全被创建出来之前，vue 实例的挂载元素$el和数据对象 data 都为 undefined，还未初始化。
 
2、created（创建后）
 
数据对象 data 已存在，可以调用 methods 中的方法，操作 data 中的数据，但 dom 未生成，$el 未存在 。
 
3、beforeMount（挂载前）
 
vue 实例的 $el 和 data 都已初始化，挂载之前为虚拟的 dom节点，模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中。data.message 未替换。
 
4、mounted（挂载后）
 
vue 实例挂载完成，data.message 成功渲染。内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了。实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，DOM 渲染在 mounted 中就已经完成了。
 
5、beforeUpdate（更新前）
 
当 data 变化时，会触发beforeUpdate方法 。data 数据尚未和最新的数据保持同步。
 
6、updated（更新后）
 
当 data 变化时，会触发 updated 方法。页面和 data 数据已经保持同步了。
 
7、beforeDestory（销毁前）
 
组件销毁之前调用 ，在这一步，实例仍然完全可用。
 
8、destoryed（销毁后）
 
组件销毁之后调用，对 data 的改变不会再触发周期函数，vue 实例已解除事件监听和 dom绑定，但 dom 结构依然存在。
 
具体详细可以参考：https://segmentfault.com/a/1190000011381906

什么是 Vue 生命周期？
 
Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载 DOM -> 渲染、更新 -> 渲染、销毁等一系列过程，称之为 Vue 的生命周期。
 
Vue 有几个生命周期，它们的作用主要是什么？
 
8 个，创建前/创建后、挂载前/挂载后、更新前/更新后、销毁前/销毁后。Vue生命周期的作用是方便我们通过它的生命周期，在业务代码中更好地操作数据，实现相关功能。
 
Vue生命周期详解过程
 
创建前/后：在 beforeCreated 阶段，Vue 实例的挂载元素 $el和数据对象data以及事件还未初始化。在created阶段，Vue实例的数据对象data以及方法的运算有了，$el 还没有。
载入前/后：在 beforeMount 阶段，render 函数首次被调用，Vue 实例的 $el 和 data 都初始化了，但还是挂载在虚拟的 DOM 节点上。在 mounted 阶段，Vue 实例挂载到实际的 DOM 操作完成，一般在该过程进行 Ajax 交互。
更新前/后：在数据更新之前调用，即发生在虚拟 DOM 重新渲染和打补丁之前，调用 beforeUpdate。在虚拟 DOM 重新渲染和打补丁之后，会触发 updated 方法。
销毁前/后：在执行实例销毁之前调用 beforeDestory，此时实例仍然可以调用。在执行 destroy 方法后，对 data 的改变不会再触发周期函数，说明此时 Vue 实例已经解除了事件监听以及和 DOM 的绑定，但是 DOM 结构依然存在。beforeDestroy 钩子函数的执行时机是在 $destroy 函数执行最开始的地方，接着执行了一系列的销毁动作，包括从 parent 的 $children 中删掉自身，删除 watcher，当前渲染的 VNode 执行销毁钩子函数等，执行完毕后再调用 destroy 钩子函数。在 $destroy 的执行过程中，它又会执行 vm.patch(vm._vnode, null) 触发它子组件的销毁钩子函数，这样一层层的递归调用，所以 destroy 钩子函数执行顺序是先子后父，和 mounted 过程一样
activated 和 deactivated 钩子函数是专门为 keep-alive 组件定制的钩子
 
第一次页面加载会触发 Vue 哪几个钩子？
 
会触发 4 个生命钩子：创建前/创建后、挂载前/挂载后
 
DOM 渲染在哪个周期就已经完成？
 
在 beforeMounted 时它执行了 render 函数，对 $el 和 data 进行了初始化，但此时还是挂载到虚拟的 DOM 节点，然后它在 mounted 时就完成了 DOM 渲染，这时候我们一般还进行 Ajax 交互。

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
 
在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册js方法，可以让我们用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的实例。
 

说一下vue的生命周期钩子函数：
 
vue 的生命周期11个钩子函数是按照以下的顺序来的 ：（不可逆转哦,第11个除外） 
 一. 组件创建前后
 
1.beforeCreate
2.created
 
如，写一个子组件，然后挂在到父组件，在子组件中，console.log 子组件中的
 
data（）{
    return {
        a:1
    },
    beforeCreate(){
        console.log(this.a)//undefined
    },
    created(){
        console.log(this.a)//1
    }
}
 
. 
 .
 
 
二. vue启动前后
 
3.beforeMount
4.mounted
 
这两个的意思就是， 
 vue在beforeMount时，还不管事，也就是说，还没有渲染数据到<div id="app"><div/>里面，此时的这个组件还是空的
 
当mounted时，才会往<div id="app"><div/> 添加东西，也就是vue正式 
 接管<div id="app"><div/>
 
可以获取#app的innerHTML查看差异；
 
beforeMount(){
    console.log(document.getElementById('app').innerHTML)//空的
},
mounted(){
    console.log(document.getElementById('app').innerHTML)//#app里的内容
}
 
. 
 .
 
 
三. 组件更新前后
 
5.beforeUpdate
6.updated
 
这个就不用我多说了吧？当子组件里面的 视图改变 的时候触发。 
 如，做一个按钮，让data里面的a++，假如 一开始a是1 
 beforeUpdate返回1 
 updated返回2
 
beforeUpdate(){
    console.log(document.getElementById('a').innerHTML)//1
},
updated(){
    console.log(document.getElementById('a').innerHTML)//2          
}
 
再点一次 
 beforeUpdate返回2 
 updated返回3。。。 
 . 
 .
 
 
四. 组件销毁前后(一般配合v-if使用)
 
7.beforeDestroy
8.destroyed
 
给这个子组件用v-if来控制它的销毁和创建，注意以下：v-show不行。 
 子组件销毁前触发beforeDestroy 
 子组件销毁后触发destroyed 
 第一次会触发7.8. 
 创建子组件后会触发以上的第1.2.3.4.钩子函数。
 
有一个问题，如果我们在子组件里写一个定时器，然后，子组件被销毁了，定时器还会执行吗？ 
 答案是会的 
 所以这时候就会用到了destroyed,在组件被销毁后，我们把定时器给清除就好了。
 
所以这两个钩子函数一般用于做性能的优化。 
 . 
 .
 
 
五. 组件激活时，未激活时
 
9.activated
10.deactivated
 
这两个钩子函数呢一般配合<keep-alive><keep-alive/>来使用。 
 通过看 四。这个例子，你肯定知道了一个组件怎么被销毁和创建。 
 但是我们知道通常一个组件是很大的，如果我们总是一直创建、销毁、创建、销毁。。。这样很不合理，而且很浪费性能。。。
 
这时候我们就可以用<keep-alive><keep-alive/>配合着两个钩子函数来控制组件的激活和不激活。 
 
说一下<keep-alive><keep-alive/>，它就相当于把你的组件给缓存下来了，目的呢就是不让组件重复的渲染，然后我们通过v-if触发，子组件就不会再触发7 和 8 了，而是只会频繁的触发9 和 10 
 这样性能会比7 和 8 好的多。 
 . 
 .
 
 
六. 当捕获一个来自子孙组件的错误时被调用
 
11.errorCapture
 
当子孙组件报错的时候，父组件会触发这个钩子函数，并且会返回三个参数， 
 第一个参数是 错误对象 
 第二个参数是 报错的子孙组件 
 第三个参数是 报错的子孙组件的具体哪个地方报错。（如，假如我没有定义b这个变量，但是我去console.log(b) 这一句肯定会报错，假如我把这句错误代码写在了created这个钩子函数里，那第三个参数会返回就是：created hook）
 
具体第11个没深入研究，喜欢的可以去看下官网的 errorCapture。
 
好啦，手打不易，给个赞吧。 
 还是那句话，如果有说的不对的地方，请指教。