2024年5月11日发(作者：)

vuekeepalive原理

Vue的keep-alive组件是用来缓存组件实例的，可以将其放置在需

要缓存的组件外层，这样当组件被切换时，Vue会将其缓存起来而不是销

毁掉。当再次切换回该组件时，会重新从缓存中取出实例而不是重新创建。

Vue的keep-alive组件的原理如下：

1. 构建缓存：首次渲染组件时，Vue会将组件的实例缓存起来，放

到内存中的一个缓存列表中。同时，Vue也会将VNode（虚拟DOM）缓存

起来，以便之后重新渲染时使用。

2. 切换组件：当切换到另一个需要缓存的组件时，Vue会将当前组

件实例和VNode保存起来，并从内存中的缓存列表中找到对应的缓存实例

和VNode。

3. 激活和停用：激活时，Vue会将缓存的组件重新激活（即从缓存

列表中取出实例），并重新渲染到页面上；停用时，Vue会将缓存的组件

暂时停用，并从页面上移除。这样可以节省性能，不用每次切换组件都去

创建和销毁实例。

4. 销毁缓存：如果缓存的组件实例太多，超过了keep-alive设置的

最大缓存数量或者超过了浏览器的内存限制，那么Vue就会销毁一部分的

缓存实例，释放内存。

5. 生命周期钩子：当组件被缓存和重新激活时，Vue会触发对应的

生命周期钩子函数，比如activated和deactivated。

6. 动态缓存：在keep-alive组件内部可以通过include和exclude

属性动态地进行组件缓存和不缓存的控制。通过设置include属性，可以

指定只有一些组件会被缓存；通过设置exclude属性，可以指定一些组件

不会被缓存。

7. 强制更新：通过设置keep-alive组件的key属性可以实现强制更

新缓存的组件，即使组件实际上没有发生变化。

总结起来，Vue的keep-alive组件通过缓存实例和VNode来实现组

件的缓存和复用，从而提升性能。它适用于需要频繁切换的组件，可以减

少重新创建和销毁组件的开销，同时也提供了一些灵活的配置选项来控制

缓存的行为。