vue3中使用keep-alive的方法

### Vue3 中使用 `keep-alive` 组件实现页面缓存 #### 配置路由文件 为了使某些视图能够被缓存，在定义这些视图对应的路由时，需设置特定元属性。例如： ```javascript { path: &#39;/keepAliveDemo&#39;, name: &#39;keepAliveDemo&#39;, component: () => import(&#39;@/views/test/keep-alive/index.vue&#39;), meta: { title: &#39;keepAlive使用示例&#39;, keepAlive: true, isRefresh: true, }, } ``` 此配置表明 `/keepAliveDemo` 路径下的组件将启用缓存机制[^2]。 #### 编写 App.vue 文件 接着是在应用入口文件中加入 `<keep-alive>` 标签包裹住 `<router-view>`，从而让指定条件满足的子组件得以保存其状态而不必每次重新渲染: ```html <template> <div id="app"> <!-- 只有当 matchedComponents 不为空数组时才激活缓存 --> <keep-alive :include="cachedViews"> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <!-- 对于不需要缓存的内容则正常显示 --> <router-view v-if="!$route.meta.keepAlive"></router-view> </div> </template> <script> export default { computed: { cachedViews() { return this.$store.state.tagsView.cachedViews; } } }; </script> ``` 上述代码片段展示了如何通过计算属性获取需要缓存的视图名称集合，并将其传递给 `:include` 属性以控制哪些组件应该参与缓存逻辑[^3]。 #### 处理生命周期钩子函数 值得注意的是，对于启用了 `keep-alive` 的组件来说，原有的销毁 (`destroyed`) 和创建 (`created`) 生命周期事件不再适用；取而代之的是新增加了一对专门用于处理活动 (activated) 和停用 (deactivated) 场景下操作的机会点。开发者可以在目标组件内部监听这两个特殊阶段来进行必要的资源清理或初始化工作[^4]。