vue 生命周期 钩子函数 keep-alive activated deactivated

### Vue3 中 `keep-alive` 的 `activated` 生命周期钩子使用 #### 一、`keep-alive` 和其作用 `keep-alive` 是 Vue 提供的一个内置组件，用于缓存动态组件实例，从而避免重新渲染已加载过的组件。这可以显著提升性能，尤其是在频繁切换的场景下[^1]。 当一个被 `<keep-alive>` 缠绕的组件被激活时（即从缓存中恢复），它的 `activated` 钩子会被触发；而当它失活时（即离开当前视图并进入缓存状态），则会调用 `deactivated` 钩子[^2]。 --- #### 二、`activated` 生命周期钩子的功能 `activated` 是由 `keep-alive` 添加到组件中的特殊生命周期钩子之一。每当组件通过 `keep-alive` 被再次显示出来时，这个方法都会被执行。它可以用来处理一些需要在组件重新展示时运行的任务，比如刷新数据或者重置某些状态。 需要注意的是，在 Vue3 中，由于组合式 API 的引入，开发者也可以利用 `onActivated` 方法来实现相同的效果[^4]。 --- #### 三、代码示例 以下是关于如何在 Vue3 中使用 `keep-alive` 并定义 `activated` 钩子的具体例子： ```html <template> <div id="app"> <!-- 使用 keep-alive 包裹动态组件 --> <button @click="currentComponent = 'Home'">Go to Home</button> <button @click="currentComponent = 'About'">Go to About</button> <keep-alive> <component :is="currentComponent"></component> </keep-alive> </div> </template> <script> import { ref, onMounted } from "vue"; export default { components: { Home: () => import("./components/Home.vue"), About: () => import("./components/About.vue"), }, setup() { const currentComponent = ref("Home"); return { currentComponent }; }, }; </script> ``` 对于上述模板中的两个组件 (`Home`, `About`)，可以在它们各自的 `.vue` 文件里这样写入逻辑： ```javascript // ./components/Home.vue <template> <div>Home Component</div> </template> <script> export default { name: "Home", activated() { console.log("Home component is re-activated"); }, // 当组件被重新激活时打印日志 }; </script> ``` 如果采用 Composition API，则可以用如下方式替代传统选项式的 `activated` 定义： ```javascript // ./components/About.vue (Composition API 版本) <template> <div>About Component</div> </template> <script> import { onActivated } from "vue"; export default { name: "About", setup() { onActivated(() => { console.log("About component has been re-activated!"); }); }, }; </script> ``` --- #### 四、注意事项 1. **抽象化特性** 在内部实现上，`keep-alive` 设置了 `abstract: true` 属性，这意味着 Vue 不会将其视为常规 DOM 元素的一部分，而是完全依赖于其实现细节去管理子组件的状态和行为[^3]。 2. **条件性缓存控制** 开发者可以通过设置 `include` 或 `exclude` 参数来自定义哪些组件应该被缓存或排除在外。例如： ```html <keep-alive include="Home"> <component :is="view"></component> </keep-alive> ``` 3. **首次挂载 vs 后续激活** 初次加载时只会触发标准的 `mounted` 钩子，而不是 `activated`。只有之后每次返回此页面才会触发生命周期内的 `activated` 函数。 ---