keep-alive 组件缓存

• 【是什么】：它是 Vue 内置的一个组件，可以用来做组件缓存以提升性能。

• 【怎么用】：一般用这个内置组件可以包裹住动态组件（component）或路由出口的地方，它提供的也有 include 属性可以控制缓存哪些组件名，exclude 属性控制不缓存哪些组件，它对应的也有两个钩子，分别是激活时触发的 activated 和失活时触发的 deactivated。

组件缓存是指在前端开发中，将已经渲染的组件实例缓存起来，以便在需要重新使用时直接从缓存中获取，而不需要重新创建和渲染新的组件实例。

组件缓存常用于以下情况：

1. 提高性能：对于一些频繁使用或渲染复杂的组件，缓存可以避免重复的实例化和渲染过程，从而提高应用的性能和响应速度。

2. 状态保持：某些组件可能包含用户输入、滚动位置或折叠状态等数据，将这些组件实例缓存起来可以保持它们的状态，避免重新加载数据或重置状态。

3. 优化动画：对于需要频繁切换显示和隐藏的组件，通过缓存可以减少重复动画的开销，提供更流畅的用户体验。

1.Vue keep-alive：Vue 提供了 keep-alive 组件，它可以将包裹的组件实例进行缓存，并在需要时直接获取缓存的实例。

2.手动缓存：使用 JavaScript 对象或数组等数据结构手动缓存组件实例，需要注意及时销毁或更新缓存的实例，以防止内存泄露或数据过期。

// 创建缓存对象
const componentCache = {};

// 渲染组件
function renderComponent() {
  const key = 'unique_key';
  if (componentCache[key]) {
    return componentCache[key]; // 从缓存中获取
  } else {
    const instance = createComponentInstance();
    componentCache[key] = instance; // 缓存实例
    return instance;
  }
}