随着对 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 生命周期
一 、vue的生命周期是什么
二、生命周期执行顺序
三、各个生命周期的作用
四、vue中内置的方法 属性和vue生命周期的运行顺序

一 、vue的生命周期是什么
vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、挂载、更新、销毁，这就是一个组件所谓的生命周期
附加一个vue官方的 【vue生命周期钩子】链接
创建：	beforeCreate  created

挂载：beforeMount  mounted 

修改：beforeUpdate updated

卸载：beforeDestroy  destroyed 

二、生命周期执行顺序
单组件生命周期：

beforeCreate   => created => beforeMount   => mounted  =>  beforeUpdate => updated => beforeDestroy   => destroyed
父子组件创建顺序：在父组件挂载完成之前先挂载子组件

父beforeCreate   => 父created => 父beforeMount   => 子beforeCreate   =>子created => 子beforeMount   =>子 mounted => 父mounted
父子组件更新顺序：在父组件更新完成之前先挂载子组件

父beforeUpdate => 子beforeUpdate => 子updated => 父updated
父子组件卸载顺序：在父组件卸载完成之前先挂载子组件

父beforeDestroy  => 子beforeDestroy  => 子destroyed => 父destroyed
三、各个生命周期的作用
beforeCreate：

在此阶段，实例刚在内存中被创建出来。此时，data的数据和methods中方法的都还没有初始化，数据和模板均获取不到
created：

在此阶段，实例已经在内存中创建完成。data 和 methods、computed都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作。此生命周期为最早可进行ajax异步数据请求的生命周期，服务端渲染也可在此进行
beforeMount：

执行到这个钩子的时候，在内存中已经编译好了模板了，相关的render函数首次被调用（虚拟DOM）,但是还没有挂载到页面中，此时，页面还是旧的
mounted：

执行到这个钩子的时候，就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行，mounted只会执行一次。
beforeUpdate：

当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步，不会触发附加地重渲染过程
updated：
调用时，组件DOM已经更新，页面显示的数据和data中的数据已经保持同步了，都是最新的 。所以可以执行依赖于DOM的操作，然后在大多是情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环，该钩子在服务器端渲染期间不被调用
beforeDestory：

Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于可用状态。还没有真正被销毁，此时还是可以访问实例的属性

这一步还可以用this来获取实例，
一般在这一步做一些重置的操作，比如清除掉组件中的定时器 和 监听的dom事件

destroyed：

调用后，Vue 所有的 data 和 methods ， 指令， 过滤器 ……都是处于不可用状态，所有的事件监听器会被移除，所有的子实例也会被销毁。
四、vue中内置的方法 属性和vue生命周期的运行顺序
props => methods =>data => computed => watch;

Vue 的生命周期：Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。
vue生命周期的作用

它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
vue生命周期阶段

总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后
阶段	介绍

beforeCreate----创建前	组件实例刚被创建，组件属性计算之前，数据对象data都为undefined，未初始化。

created----创建后	组件实例创建完成，属性已经绑定，数据对象data已存在，但dom未生成，$el未存在
beforeMount---挂载前	vue实例的$el和data都已初始化，挂载之前为虚拟的dom节点，data.message未替换

mounted-----挂载后	vue实例挂载完成，data.message成功渲染。

beforeUpdate----更新前	当data变化时，会触发beforeUpdate方法

updated----更新后	当data变化时，会触发updated方法

beforeDestory—销毁前	组件销毁之前调用

destoryed—销毁后	组件销毁之后调用，对data的改变不会再触发周期函数，vue实例已解除事件监听和dom绑定，但dom结构依然存在
第一次页面加载会触发的钩子

第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子
DOM 渲染在 mounted 中就已经完成了
每个周期适合的场景

生命周期钩子的一些使用方法： beforecreate : 可以在这加个loading事件，在加载实例时触发 created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用 mounted : 挂载元素，获取到DOM节点 updated : 如果对数据统一处理，在这里写上相应函数 beforeDestroy : 可以做一个确认停止事件的确认框 nextTick : 更新数据后立即操作dom。http请求一般在 created 里面，如果涉及到需要页面加载完成之后就在 mounted。