在Vue中，我们可以通过使用生命周期钩子函数来监听组件生命周期的变化。生命周期钩子函数是在组件不同阶段被调用的函数，它们可以帮助我们在组件不同的生命周期阶段执行相关的操作。
常用的生命周期钩子函数
以下是Vue中常用的生命周期钩子函数：
- beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
- created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
- beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。
- mounted：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子函数。组件已经被渲染到页面中。
- beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。可以在该钩子函数中进一步地更改数据，不会触发附加的重渲染过程。
- updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后组件会调用该钩子函数。
- beforeDestroy：在实例销毁之前调用。在这一步，实例仍然完全可用。
- destroyed：在实例销毁之后调用。这个时候，对于所有的指令和事件监听器都进行了解绑，所有的子实例也已经被销毁。
我们可以在组件中实现这些方法来监听组件的生命周期变化。例如，我们可以在组件销毁前执行一些清理工作，如取消订阅，删除定时器等。
示例代码
export default {
mounted() {
console.log('组件已经被挂载到页面中')
},
beforeDestroy() {
console.log('组件即将被销毁')
}
}
2023-05-06 09:24:55 更新