直接先讲一下解决办法
整体都是通过分装组件，封装出去静态的东西，就不卡了，如果是改造的想法，使用插槽是改造最快的办法 像这样，因为这样的话，之前所有逻辑之类的东西，全部都不用动
新页面也很简单，就这样写一下，然后所有页面静态的地方都用这个传过来就好
下面解析一下原理吧
Vue 的 keep-alive 是一个内置组件，用于缓存包裹在其中的组件实例，避免组件在切换时重复创建和销毁，从而提升性能。其底层逻辑主要基于以下几个核心机制：
1. 缓存存储机制
keep-alive 内部维护了两个缓存列表：
cache对象 ：以组件实例的key为键，组件实例为值，存储所有需要缓存的组件实例。keys数组 ：记录缓存组件的key顺序，用于管理缓存的上限（max属性）和 LRU（最近最少使用）淘汰策略。
当组件被包裹在 keep-alive 中时，首次渲染会正常创建组件实例并缓存到 cache 中；再次渲染时，会直接从 cache 中读取已缓存的实例，而非重新创建。
2. 组件生命周期钩子的控制
keep-alive 会拦截被包裹组件的生命周期，当组件被缓存时：
- 不会触发
beforeDestroy和destroyed钩子（因为组件实例未被销毁）。 - 会触发
deactivated钩子（组件被缓存时调用）。 - 当组件从缓存中被激活时，会触发
activated钩子。
这一机制确保了缓存的组件不会执行销毁相关的逻辑，同时提供了缓存状态切换的钩子供开发者处理。
3. 缓存命中与更新策略
- 命中规则 ：根据组件的
key或name（若未指定key）判断是否命中缓存。 - LRU 淘汰机制 ：当缓存数量超过
max属性设定的值时，keep-alive会删除keys数组中最前面的（即最久未使用的）组件缓存，确保缓存数量不超过上限。
4. 条件缓存控制
通过 include 和 exclude 属性，可以精确控制哪些组件需要缓存或排除：
include：仅缓存名称匹配的组件（支持字符串、正则、数组）。exclude：不缓存名称匹配的组件（优先级高于include）。
这些属性会在组件渲染时进行匹配判断，决定是否对组件进行缓存处理。
底层实现简化理解
keep-alive 的核心源码逻辑可简化为：
- 渲染时判断子组件是否需要缓存。
- 若需缓存且未命中，则创建组件实例并加入缓存。
- 若已命中缓存，则直接复用缓存的实例，并更新
keys顺序（标记为最近使用）。 - 当缓存数量超限，删除最久未使用的实例。
通过这种机制，keep-alive 有效减少了组件切换时的性能开销，尤其适用于频繁切换但内容变化不频繁的场景（如标签页、列表页等）。
缓存机制卡本质上与 Vue 的组件渲染机制和浏览器性能瓶颈有关。当使用 keep-alive 缓存大量数据的组件时，即使内容是静态的，也可能因为以下原因导致交互卡顿：
-
DOM 节点数量过多：大量静态内容会生成庞大的 DOM 树，浏览器在处理点击、滚动等交互时需要遍历或重绘这些节点，导致性能损耗。
-
事件委托与事件冒泡：父组件可能对缓存的子组件绑定了事件监听，大量 DOM 节点会增加事件冒泡的处理成本。
-
内存占用累积 ：
keep-alive会保留组件实例及其数据，大量缓存会占用更多内存，可能导致 JavaScript 引擎执行效率下降。
而将静态内容通过「插槽拆分到独立页面」能缓解卡顿的核心原因是：
-
减少当前页面的 DOM 规模：拆分后，静态内容只在需要时才渲染，当前活跃页面的 DOM 节点数量大幅减少，浏览器交互更流畅。
-
避免不必要的内存占用：未显示的页面（组件）可以被卸载或延迟加载，释放内存资源。
-
隔离渲染上下文：独立页面拥有独立的 Vue 实例或组件作用域，避免了大型组件树的渲染阻塞。
这种优化思路本质上是「分而治之」：通过拆分组件 / 页面，控制单次渲染的 DOM 数量和内存占用，从而规避浏览器的性能瓶颈。尤其在处理大量静态内容时，这种拆分比单纯依赖 keep-alive 缓存更能提升交互响应速度。