vue 组件切换时执行哪个 生命周期
时间: 2023-10-27 22:47:09 浏览: 44
在 Vue 中,当一个组件被创建、更新或销毁时,都会触发一系列的生命周期钩子函数。其中,组件切换时会触发以下生命周期钩子函数:
- beforeDestroy:在组件销毁之前执行,可以用来清理组件中的定时器、事件监听器等。
- deactivated:在组件被停用时执行,比如组件被切换到了 `keep-alive` 缓存中,可以用来暂停动画、停止计时器等。
- activated:在组件被激活时执行,比如组件从 `keep-alive` 缓存中被重新激活,可以用来重新启动动画、重新开始计时器等。
需要注意的是,`beforeDestroy` 只会在组件销毁之前执行一次,而 `deactivated` 和 `activated` 可能会多次执行,因为组件可能会被多次切换。
相关问题
vue组件激活的生命周期
在Vue中,组件的激活生命周期包括两个钩子函数:activated和deactivated。activated钩子函数会在组件被激活时调用,而deactivated钩子函数会在组件被停用时调用。当组件从一个被缓存的路由切换到另一个路由时,组件不会被销毁,而是会触发activated钩子函数,表示组件被激活。在这个钩子函数中,我们可以执行需要在组件激活时执行的逻辑操作。而当组件从当前路由切换到其他路由时,会触发deactivated钩子函数,表示组件被停用。在这个钩子函数中,我们可以执行需要在组件停用时执行的逻辑操作。通过使用activated和deactivated钩子函数,我们可以更好地控制组件在激活和停用状态下的行为。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [Vue生命周期(keep-alive缓存特殊activated(组件激活时)、deactivated(组件停用时))、父子组件的执行顺序](https://blog.csdn.net/muzidigbig/article/details/112696398)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [【Vue学习】Vue组件的生命周期](https://blog.csdn.net/zx1041561837/article/details/129202119)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [vue中keep-alive内置组件缓存的实例代码](https://download.csdn.net/download/weixin_38721119/14801633)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]
vue中keep alive组件的生命周期
在 Vue 中,使用 `<keep-alive>` 可以缓存组件实例,从而避免每次组件切换时都重新渲染和执行组件的生命周期函数。下面是 `<keep-alive>` 组件的生命周期:
1. beforeRouteEnter(to, from, next): 在组件进入路由之前调用,此时组件实例还没有被创建。
2. created(): 在组件被创建并且数据被观察之前调用。
3. activated(): 在组件被激活(被缓存的组件被激活)时调用。
4. deactivated(): 在组件被停用(被缓存的组件被停用)时调用。
5. beforeDestroy(): 在组件被销毁之前调用。
需要注意的是,当组件被缓存时,不会再次调用 `created()` 和 `beforeDestroy()` 生命周期函数,因为组件已经被创建和销毁过了。而当组件被激活和停用时,会分别调用 `activated()` 和 `deactivated()` 生命周期函数。