Vue——生命周期函数

Vue.js的生命周期是组件从创建到销毁过程中的一系列钩子函数，这些钩子给开发者提供了在不同阶段添加自己的代码的机会。

Vue.js 2.x 版本的生命周期主要包括以下几个阶段：

1. 创建前/后（beforeCreate/created）

   • beforeCreate: 在实例初始化之后、数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
   • created: 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测、属性和方法的运算、watch/event 事件回调。这里没有$el，如果需要与DOM进行交互，或者发送请求获取数据，通常是在这里进行。

2. 挂载前/后（beforeMount/mounted）

   • beforeMount: 在挂载开始之前被调用，相关的 render 函数首次被调用。此时，模板已经编译成了渲染函数，但是还没有挂载到DOM中。
   • mounted: 在 el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果根实例挂载到了文档内部，当mounted被调用时，组件已经在DOM中。

3. 更新前/后（beforeUpdate/updated）

   • beforeUpdate: 在数据更新之后、DOM重新渲染和打补丁之前调用。可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
   • updated: 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。但是在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。

4. 销毁前/后（beforeDestroy/destroyed）

   • beforeDestroy: 在实例销毁之前调用。实例仍然完全可用，这是清理定时器或取消事件订阅的最佳时机。
   • destroyed: 在 Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器被移除，所有的子实例也都被销毁。

5. 另外两个钩子（activated/deactivated）

   • activated: 被 keep-alive 缓存的组件激活时调用。
   • deactivated: 被 keep-alive 缓存的组件停用时调用。

生命周期的作用：

• 初始化数据/事件：在beforeCreate和created钩子中，可以设置组件的初始数据或者进行事件监听。
• DOM交互：在mounted钩子中，可以进行DOM操作，或者在浏览器完成渲染后执行操作。
• 数据更新：在beforeUpdate和updated钩子中，可以对数据更新前后的DOM进行处理。
• 资源清理：在beforeDestroy和destroyed钩子中，可以执行必要的清理任务，比如清除定时器和解绑事件监听。
• 缓存处理：activated和deactivated钩子在使用keep-alive进行组件缓存时非常有用，它们可以控制缓存内容的激活与停用。