一、概念

　　vue生命周期，又叫生命周期钩子函数，是组件从创建到销毁的过程。

二、主要的八大生命周期

　　1.首先，为方便观察每个周期的特点，我们模拟一个"one"组件的创建与销毁，并在八个生命周期中分别打印挂载点、属性、方法以及真实的DOM结构，通过输出结果进行分析。

1 
     
      2     
      3     
      4 
     

　　2.八大生命周期的特点

• beforeCreate() 创建前：当前生命周期函数主要用于初始化工作，此时可以创建一个loading；

　　

• created() 创建后：可以访问到vm身上所有属性和方法；会将data和methods身上所有的属性和方法都挂载在vm的实例身上；会在data身上所有属性添加getter/setter方法，因此若要进行前后端数据交互时必须在当前生命周期中进行"响应式原理";若数据未提前在data中进行绑定，那么这个属性身上不会有getter/setter方法，数据便不会动态改变；

　　

• beforeMount() 挂载前：数据和模板还未进行结合，访问不到真实的DOM结构，可以对数据做最后的的修改；

　　

• mounted() 挂载后：数据和模板已经结合，可以通过this.$refs访问到真实的DOM结构；

　　

• beforeUpdate() 更新前：当data中的数据发生改变时会执行，可以访问到真实DOM结构、对数据做最后的修改，当前生命周期函数中的数据和模板还没更新完成；

　　

• updated() 更新后：数据更新后形成最新的DOM结构，当前是一个频繁触发的函数，因此要做一些时间绑定或实例化时，需要做一个提前判断；

　　

• beforeDestroy() 销毁前：可以继续访问到真实DOM结构以及data中的数据，通常在这个生命周期函数中做一些事件绑定/移除的操作；

　　

• destroyted() 销毁后：断开DOM与数据之间的关联，访问不到真实的DOM结构；

　　

 

 　　3.注意：

• 多次执行的生命周期函数：beforeUpdate()、updated()
• 组件第一次创建时会执行：beforeCreate()、created()、beforeMount()、mounted()