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

vue keepalive 缓存原理

Vue的keep-alive组件可以实现缓存组件的功能。其原理是将组件的实例缓存

在内存中，以便下次直接使用，而不需要重新创建和销毁。

当一个组件被包裹在标签中时，Vue会将其实例缓存起来。当组

件被切换为非活动状态时（比如切换到了另一个页面），组件实例并不会被销毁，

而是被缓存起来。然后，在切换回该组件时，Vue会从缓存中获取该组件的实例，

而不是重新创建一个新的实例。

缓存的实现原理如下：

1. 组件被包裹在标签中，则该组件的实例会被缓存起来。缓存是

以组件名字为key，组件实例为value的方式存储的。

2. 切换到其他组件时，该组件会被标记为非活动状态。此时，组件的生命周期

钩子函数activated会被调用，可以用来执行一些激活时需要进行的操作（比如

初始化数据）。

3. 当再次切换回该组件时，会先检查缓存中是否存在该组件的实例。如果存在，

则直接从缓存中获取该实例，并将组件标记为活动状态；如果不存在，则会创建

一个新的组件实例，并将其缓存起来。

4. 当组件被销毁时，会调用生命周期钩子函数deactivated，可以用来执行一些

在组件非活动状态下需要进行的操作（比如清除数据）。

需要注意的是，缓存的组件在被激活时不会重新渲染，而是直接使用上次渲染的

结果。如果需要在激活时重新渲染组件，可以在activated钩子函数中手动调用

组件的forceUpdate方法。