Vue.js的生命周期是组件从创建到销毁过程中的一系列钩子函数，这些钩子给开发者提供了在不同阶段添加自己的代码的机会。
Vue.js 2.x 版本的生命周期主要包括以下几个阶段：
-
创建前/后（beforeCreate/created）
- beforeCreate: 在实例初始化之后、数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
- created: 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测、属性和方法的运算、watch/event 事件回调。这里没有$el，如果需要与DOM进行交互，或者发送请求获取数据，通常是在这里进行。
-
挂载前/后（beforeMount/mounted）
- beforeMount: 在挂载开始之前被调用，相关的 render 函数首次被调用。此时，模板已经编译成了渲染函数，但是还没有挂载到DOM中。
- mounted: 在 el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果根实例挂载到了文档内部，当mounted被调用时，组件已经在DOM中。
-
更新前/后（beforeUpdate/updated）
- beforeUpdate: 在数据更新之后、DOM重新渲染和打补丁之前调用。可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
- updated: 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。但是在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。
-
销毁前/后（beforeDestroy/destroyed）
- beforeDestroy: 在实例销毁之前调用。实例仍然完全可用，这是清理定时器或取消事件订阅的最佳时机。
- destroyed: 在 Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器被移除，所有的子实例也都被销毁。
-
另外两个钩子（activated/deactivated）
- activated: 被 keep-alive 缓存的组件激活时调用。
- deactivated: 被 keep-alive 缓存的组件停用时调用。
生命周期的作用：
- 初始化数据/事件：在
beforeCreate和created钩子中，可以设置组件的初始数据或者进行事件监听。 - DOM交互：在
mounted钩子中，可以进行DOM操作，或者在浏览器完成渲染后执行操作。 - 数据更新：在
beforeUpdate和updated钩子中，可以对数据更新前后的DOM进行处理。 - 资源清理：在
beforeDestroy和destroyed钩子中，可以执行必要的清理任务，比如清除定时器和解绑事件监听。 - 缓存处理：
activated和deactivated钩子在使用keep-alive进行组件缓存时非常有用，它们可以控制缓存内容的激活与停用。