页面路由切换时，路由钩子函数，生命周期函数执行顺序

### Vue3 中 `keep-alive` 与非 `keep-alive` 切换路由触发的生命周期差异 #### 非 `keep-alive` 场景下的生命周期行为 在未使用 `<keep-alive>` 的情况下，每次切换路由时都会销毁当前组件并重新创建目标组件。因此，完整的 Vue 组件生命周期会被触发，具体顺序如下： 1. 当前组件被卸载时会依次调用 `beforeDestroy` 和 `destroyed` 方法。 2. 新的目标组件加载时会依次调用 `beforeCreate`, `created`, `beforeMount`, 和 `mounted` 方法。 这种模式适用于不需要保存状态的场景，因为每次切换都会重新初始化组件及其内部状态[^2]。 #### 使用 `keep-alive` 场景下的生命周期行为 当使用 `<keep-alive>` 包裹路由视图时，Vue 会对匹配的组件进行缓存处理。此时，常规的生命周期方法不会再次触发，而是引入了两个额外的生命周期钩子：`onActivated` 和 `onDeactivated`。以下是具体的生命周期触发情况： 1. **初次进入组件** - 如果是第一次访问某个被 `<keep-alive>` 缓存的组件，则仍然会按照标准流程触发 `beforeCreate`, `created`, `beforeMount`, 和 `mounted` 生命周期方法[^4]。 2. **非首次进入组件** - 对于已经被缓存的组件，在后续切换回该组件时，不再重复执行上述标准生命周期方法。取而代之的是触发 `onActivated` 钩子函数，表示组件已被激活并恢复显示[^3]。 3. **离开组件** - 当从一个被 `<keep-alive>` 缓存的组件导航至其他页面时，也不会立即销毁该组件实例，而是将其存储在内存中以便下次快速重用。在此过程中，仅会触发 `onDeactivated` 钩子函数，表明组件已进入休眠状态[^1]。 通过这种方式，`<keep-alive>` 提供了一种机制来减少不必要的 DOM 操作和计算开销，从而提升用户体验特别是针对那些需要维持一定上下文或交互历史的功能模块非常有用。 ```html <!-- 示例代码 --> <template> <keep-alive> <router-view></router-view> </keep-alive> </template> <script> import { onActivated, onDeactivated } from 'vue'; export default { setup() { onActivated(() => { console.log('Component re-activated'); }); onDeactivated(() => { console.log('Component deactivated and cached'); }); } }; </script> ``` --- ###