前言生命周期顾名思义，是一个事物创建到销毁的过程，vue的生命周期就是一个vue实例创建到销毁的过程。当然vue官方也给出了自己的回答：每⼀个vue实例从创建到销毁的过程，就是这个vue实例的⽣命周期。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等⼀系列过程。所以从总体上来说这一过程中有八个钩子函数，在这里可以简单的把钩子函数理解成到生命周期某个阶段自动执行的回调函数，接下来就让我们一起来看看生命周期的过程

这是生命周期完整的流程图，可以作为参考

阶段一：beforeCreate执行阶段

在这个阶段还没有任何数据和方法，但是这也是生命周期的一个阶段，可见如下代码

console.log('----beforeCreate----') 
console.log(this.msg) //undefined 
console.log(this.$el) //undefined },

阶段特点：这个时候即使data和methods里有数据和方法也无法读取

阶段二：Created

这个时候，vue实例中的data、method已被初始化，属性也被绑定，但是此时还是虚拟dom，真是dom还没生成，$el 还不可用，这个时候可以调用data和method的数据及方法，所以一般会在这个函数中进行网络请求数据

created() { 
console.log('----created----')
console.log(this.msg) //msg 
console.log(this.$el) //undefined },

阶段特点：最早可以拿到data和methods的阶段，经常进行网络请求

阶段三：beforemounted

此时模板已经编辑完成，但还没有被渲染至页面中（即为虚拟dom加载为真实dom），此时el存在则会显示el。在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取。可以通过洗衣服的例子加强理解 beforeCreate可以理解为洗衣服前的筹划和思想准备阶段，Created可以理解成实际准备阶段，这个阶段准备洗衣液等。beforemounted之间的阶段就是把所有衣服都洗完了，但是还没拿出来晾晒在院子里，这正好对应了vue的编译阶段，但是页面还没有真正渲染。

console.log('----beforeMount----') 
console.log(this.msg) //msg 
console.log(this.$el) //undefined
},

阶段特点：这个阶段是数据在渲染前最后一次更改数据的机会，不会触发其他的钩子函数。

阶段四 mounted

此时模板已经被渲染成真实DOM，用户已经可以看到渲染完成的页面，页面的数据也是通过双向绑定显示data中的数据。这实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的躺在我们的内存中，一动不动。

    console.log('----mounted----')
    console.log(this.msg)	//msg
    console.log(this.$el)	//<div id="app"><span model="msg"></span></div>
  },

阶段特点：这里是最早可以获取dom元素的地方，切记如果想操作dom元素最早可以在mounted里

阶段五 beforeupdate

阶段特点：当执行beforeupdated的时候，页面中显示的数据还是旧的，此时data数据已经更新，但是页面还没有和最新的数据保持一致。

阶段六 updated

阶段特点：这个时候页面和data中数据已经保持一致，都是最新的数据了

阶段七 beforedestroy

阶段特点：这个阶段vue已经从运行阶段进入到销毁阶段，但是执行 beforedestroy的时候，实例身上的data和method等还都可以使用，还没有真正进入销毁阶段。

阶段八 destroyed

阶段特点：当执行destroyed函数的时候，组件已经被完全销毁，此时，组件中的所有数据，方法，指令，过滤器都已经不可用

总结：

1 vue系统自带的生命周期八个（顺序执行）

beforeCreate

created

beforeMount

mounted

beforeupdate

updated

beforedestroy

destroyed 2 一旦进入页面会执行： beforeCreate
created beforeMount mounted

3 拿个阶段有 $el(根节点)，data，methods

beforeCreate 无$el 无data 无methods

created 无$el 有data 有methods

beforeMount 无$el 有data 有methods

mounted 有$el 有data 有methods

beforeupdate 有$el 有data 有methods

updated 有$el 有data 有methods

beforedestroy 有$el 有data 有methods

destroyed 无$el 无data 无methods

4 如果加入keep-alive就多两个生命周期

actived 进入keep-alive触发

deactived 离开keep-alive触发

5 如果加入了keep-alive，第一次进入组件会执行哪些钩子？

beforeCreate

created

beforeMount

mounted

actived

6 如果加入了keep-alive，第二次进入或者第N次进入组件会执行哪些钩子？

只执行actived

生命周期函数的总结

阶段一 ：beforeCreate执行阶段

阶段二 ：Created

阶段三 ：beforemounted