vue keepalived工作原理

Vue 的 KeepAlive 组件可以缓存组件的状态，使得在组件切换时不需要重新渲染，从而提高了应用的性能。其工作原理如下： 1. 当 KeepAlive 组件包裹的子组件被激活时，会将子组件的 VNode 存储到内部的 cache 对象中，并将其从 DOM 树中移除。 2. 当再次渲染该组件时，会先检查 cache 中是否已经缓存了该组件的 VNode，如果有，则直接从 cache 中取出并渲染，否则重新创建该组件的实例并渲染。 3. 当组件被停用时，会将其 VNode 从 DOM 树中移除，并保留在 cache 中，以便下次使用。 4. 当 cache 中的 VNode 数量超过一定阈值时，会根据 LRU（最近最少使用）算法删除最近最少使用的 VNode。 在 KeepAlive 组件内部，会从 sharedContext 上的 renderer 上拿到一些方法，比如 move、createElement 等，这些方法是用来执行特定的销毁和渲染逻辑的。 下面是一个示例代码，演示了如何使用 KeepAlive 组件： ```html <template> <div> <button @click="toggle">Toggle</button> <keep-alive> <component :is="currentComponent"></component> </keep-alive> </div> </template> <script> import ComponentA from './ComponentA.vue' import ComponentB from './ComponentB.vue' export default { components: { ComponentA, ComponentB }, data() { return { currentComponent: 'ComponentA' } }, methods: { toggle() { this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA' } } } </script> ```

### Vue 中 `keep-alive` 的使用方法 #### 基本概念 `<keep-alive>` 是 Vue 提供的一个内置组件，用于实现动态组件的缓存功能。通过 `<keep-alive>`, 可以保存被包含组件的状态或避免重新渲染，从而提升性能[^1]。 #### 使用方式 以下是常见的 `keep-alive` 结合路由使用的代码示例： ```html <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-router> ``` 上述代码中，当 `$route.meta.keepAlive` 属性为 `true` 时，对应的组件会被缓存；反之则不会被缓存。 #### 生命周期钩子 在 `keep-alive` 缓存机制下，有两个特殊的生命周期钩子可供开发者使用： - **activated**: 当被缓存的组件激活时调用。 - **deactivated**: 当被缓存的组件停用时调用。 这些钩子函数仅适用于被 `<keep-alive>` 包裹的组件，在服务端渲染期间不会触发[^2]。 #### 内部工作原理 `<keep-alive>` 在其创建阶段会初始化两个重要属性： - **cache**: 存储已缓存的组件实例。 - **keys**: 记录当前缓存中的键名列表。 具体逻辑如下所示： ```javascript created() { this.cache = Object.create(null); // 创建一个空对象存储缓存数据 this.keys = []; // 初始化数组记录缓存键名 } ``` 此设计使得 `<keep-alive>` 能够高效管理组件状态并控制内存占用[^3]。 --- ### 解决常见问题 #### 1. 如何清除特定组件的缓存？ 可以通过设置 `include` 和 `exclude` 属性来指定哪些组件需要被缓存或者排除在外。例如： ```html <keep-alive :include="['ComponentA', 'ComponentB']"> <!-- 需要缓存的组件 --> </keep-alive> ``` #### 2. 性能优化建议 对于频繁切换但不需要长期保留状态的页面，应合理配置 `meta.keepAlive` 或者利用 `max` 属性限制最大缓存数量，防止过多无意义的数据驻留在内存中。 #### 3. 数据更新异常 由于 `<keep-alive>` 默认会复用之前的 DOM 元素而不是重新挂载新实例，因此可能会遇到某些依赖于首次加载逻辑的功能失效的情况。此时可以在 `activated` 方法里手动刷新所需资源。 --- ### 示例代码 下面是一个完整的例子展示如何结合路由和元信息判断是否启用缓存： ```html <!-- App.vue --> <template> <div id="app"> <keep-alive> <router-view v-if="$route.meta && $route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="(!$route.meta || !$route.meta.keepAlive)"></router-view> </div> </template> <script> export default { name: "App" }; </script> ``` ---