vue 生命周期函数（钩子函数）及其应用

1、vue生命周期的定义

每个 Vue 实例在被创建时都要经过一系列的初始化过程，从开始创建、编译模板、挂在DOM、渲染-更新-渲染、毁损等一系列的过程，每个过程都存在着特定的钩子函数，每个钩子函数又有着 特定的功能。

我个人的理解：vue生命周期，相当于人从出生到死亡的一个生命发展过程，随着年龄的增长，每个年龄段做着不一样的事情，发挥不一样的作用。

2、生命周期函数（钩子函数）

vue官网生命周期图如下图一所示：

钩子函数有：

beforeCreate() created()

beforeMount() mounted()

beforeUpdate() updated()

activated() deactivated()

beforeDestroy() destroyed()

（1）beforeCreate()
vue实例创建前的状态，数据没有，虚拟DOM没有 真实DOM没有

应用：可以在这里加loading事件

（2）created() 常用
vue实例创建完毕状态，数据有，虚拟DOM没有 真实DOM没有

应用：请求后端数据，拿到数据。

不过，大伙也会在mounted请求后端数据，我的理解是：如果需要结合请求数据，操作DOM节点，会在这里请求数据，在created请求后端数据会存在数据没有加载出来，需要进行异步加载。

至于这两者的区别，我也是有疑惑的，有大佬了解，请分享一下哈。

（3）beforeMount()
数据有，虚拟DOM有， 真实DOM没有

（4）mounted() 常用
数据有，虚拟DOM有， 真实DOM有

应用：发送ajax请求，请求后端数据。节点操作

（5）beforeUpdate()
在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。

在工作中，这个钩子函数我没怎么运用过。

（6） updated()
在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情

况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

在工作中，这个钩子函数我没怎么运用过。

（7）activated()
一定要配合keep-alive（缓存作用）来使用，活动时触发

（8）deactivated()
一定要配合keep-alive（缓存作用）来使用，非活动时触发。

应用：activated和deactivated配合使用，切换页面，记录历史浏览位置，增强用户体验效果。实现步骤，后续会更新发布，再添加链接。

（9） beforeDestroy
销毁前状态

（10）destroyed
执行destroy()后，不会改变已生成的DOM节点，但后续就不再受vue控制了

应用：清除定时器、延迟器、取消ajax请求等