Keep-alive组件源码中，缓存原理是如何实现长尾页面的高效缓存的？

本文共计2082个文字，预计阅读时间需要9分钟。

今天开门见山地聊一聊面试中被问到的一个问题：keep-alive组件的缓存原理。官方API介绍和用法如下：keep-alive是一个抽象组件，它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。在keep-alive包裹的动态组件切换时，会保留其状态，而不会销毁实例。

当使用keep-alive包裹动态组件时，会缓存不活跃的组件实例，而不是销毁它们。这意味着，当组件再次被切换回时，它们会从缓存中恢复，而不是重新创建。这与transition组件类似。

今天开门见山地聊一下面试中被问到的一个问题：keep-alive组件的缓存原理。

官方API介绍和用法

• <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
• 和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。
• 当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

官网的例子是 tab 切换保存了用户的操作，实际中还可能遇到从列表页跳转去了详情页，再跳转回列表页需要保存用户进行过的筛选操作，这就需要用到 <keep-alive>，这样也能避免重新渲染，提高页面性能。