uniapp 缓存KeepAlive

### UniApp 中 KeepAlive 缓存机制的使用方法与实现方式 在 UniApp 中，`<keep-alive>` 是一种用于缓存页面组件的机制。其核心思想是通过维护一个缓存池来存储被包裹的组件实例及其状态，从而避免重复创建和销毁组件，提升性能和用户体验[^1]。 #### 1. KeepAlive 的基本用法 在 UniApp 中，`<keep-alive>` 可以直接嵌套在路由组件中，用于缓存指定的页面或组件。以下是 `<keep-alive>` 的基本语法： ```vue <template> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> </template> ``` - `include` 和 `exclude` 属性可以用来控制哪些组件需要被缓存或排除缓存。 - `max` 属性用于限制缓存的最大数量，超出部分会按照最近最少使用的策略（LRU）淘汰旧的缓存项。 #### 2. KeepAlive 的生命周期钩子 当组件被 `<keep-alive>` 包裹时，Vue 会为这些组件提供两个特殊的生命周期钩子：`activated` 和 `deactivated`。 - **`activated`**：当组件从缓存中被激活时触发，可用于执行重新加载数据或其他初始化操作。 - **`deactivated`**：当组件被停用并移出 DOM 时触发，可用于清理定时器或释放资源。 以下是一个示例代码，展示如何结合 `activated` 和 `deactivated` 使用 `<keep-alive>`： ```vue <template> <keep-alive> <component :is="currentComponent"></component> </keep-alive> </template> <script> export default { data() { return { currentComponent: 'MyComponent' }; }, activated() { console.log('组件被激活'); }, deactivated() { console.log('组件被停用'); } }; </script> ``` #### 3. KeepAlive 的实现细节 UniApp 的 `<keep-alive>` 实现依赖于 Vue 的缓存机制。其工作原理如下： - 当组件首次被挂载时，其实例会被保存到缓存中。 - 再次访问同一组件时，直接从缓存中读取并复用，而不是重新创建新的实例。 - 缓存条件可以通过 `include` 和 `exclude` 属性进行控制[^1]。 #### 4. 示例：在 UniApp 中使用 KeepAlive 以下是一个完整的示例，展示如何在 UniApp 中使用 `<keep-alive>` 缓存页面： ```vue <template> <view> <navigator url="/pages/pageA/pageA">跳转到PageA</navigator> <navigator url="/pages/pageB/pageB">跳转到PageB</navigator> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> </view> </template> <script> export default { activated() { console.log('页面被激活'); }, deactivated() { console.log('页面被停用'); } }; </script> ``` 在上述示例中，`pageA` 和 `pageB` 的路由配置需要设置 `meta` 字段来决定是否启用缓存： ```javascript { path: '/pages/pageA/pageA', component: () => import('@/pages/pageA.vue'), meta: { keepAlive: true } // 启用缓存 }, { path: '/pages/pageB/pageB', component: () => import('@/pages/pageB.vue'), meta: { keepAlive: false } // 不启用缓存 } ``` #### 5. 注意事项 - `<keep-alive>` 仅对组件有效，无法缓存普通的 HTML 元素。 - 缓存的组件实例会在内存中保留，可能导致内存占用增加。因此需要合理设置 `max` 属性以限制缓存数量。 - 如果组件需要在每次进入时重新加载数据，可以在 `activated` 钩子中实现相关逻辑。 --- ###