keep-alive缓存组件

Vue的keep-Alive组件是用于缓存组件的高阶组件，可以有效地提高应用性能。它能够使组件在切换时仍能保持原有的状态信息，并且有专门的生命周期方便去做额外的处理。该组件在很多场景非常有用：

tabs缓存页面
分步表单
路由缓存
动态加载内容
保持某些组件状态

在Vue中，通过Keep-Alive包裹内的组件会自动缓存下来，其中只能有一个直接子组件。

实现原理：

1.组件缓存

<keep-alive> 是一个抽象组件，它不会渲染成一个真实的 DOM 元素，而是作为 Vue 组件树的包装器存在。当你在模板中使用 <keep-alive> 包裹一个组件时，这个组件会被缓存起来。

2.缓存机制

‌内存存储 ‌：<keep-alive> 使用一个内存中的缓存对象来存储被缓存的组件实例。默认情况下，这个缓存是通过一个对象来维护的，键是组件的 cid（构造函数 ID），值是组件实例。
‌生命周期钩子 ‌：当组件被包裹在 <keep-alive> 中时，Vue 会重写组件的 created、mounted、destroyed 等生命周期钩子，以便在组件激活（被再次访问）和去激活（不再显示）时执行特定的操作。例如，在组件被激活时调用 activated 钩子，在去激活时调用 deactivated 钩子。

3.渲染与激活

‌渲染 ‌：当 <keep-alive> 内部的组件需要被渲染时，Vue 会检查该组件是否已经在缓存中。如果存在，Vue 会直接从缓存中取出该组件实例进行渲染，而不是重新创建新的实例。
‌激活与去激活 ‌：当组件从缓存中被取出进行渲染时，Vue 会调用该组件的 activated 钩子；如果该组件从视图中移除（例如，用户切换到另一个标签），Vue 会调用其 deactivated 钩子。

4.include和exclude属性

<keep-alive> 允许通过 include 和 exclude 属性来指定哪些组件应该被缓存或排除。这些属性可以接受一个逗号分隔的字符串、一个正则表达式或一个数组。

include属性接受一个逗号分隔的字符串，指定哪些组件应该被缓存。例如只想缓存home和about两个组件：

js 复制代码

<keep-alive include="Home,About">
  <component :is="currentView"></component>
</keep-alive>

或者正则表达式：

js 复制代码

<keep-alive :include="/A(About|Home)/">
  <component :is="currentView"></component>
</keep-alive>

exclude 与include相反，exclude属性用于指定哪些组件不应该被缓存。例如，不想缓存login和signup组件，可以这样设置：

js 复制代码

<keep-alive exclude="Login,Signup">
  <component :is="currentView"></component>
</keep-alive>

动态绑定include和exclude 动态绑定这些属性，更加灵活。例如，使用vue的响应式数据来控制哪些组件应该被缓存。

js 复制代码

<script setup> 
    import { ref } from 'vue' // 缓存的组件名列表 
    const cacheComponents = ['Home', 'About'] // 当前要显示的组件（假设通过路由或其他逻辑动态设置）
    const currentView = ref('Home') // 示例值，实际可能来自 router 或状态管理 
</script>
    
<template>
    <keep-alive :include="cacheComponents"> 
        <component :is="currentView" /> 
    </keep-alive> 
</template>

在这个例子中，cacheComponents数组定义了哪些组件应该被缓存，可以根据vue实例的数据属性中修改这个数组。

注意事项 1.使用<keep-alive>时，确保你的组件有一个唯一的key属性，这通常是必须的，特别是在动态组件的情况下。例如：

js 复制代码

<component :is="currentView" :key="currentView"></component>

在Vue 3中，<keep-alive> 的使用方式略有不同，特别是在组合式API（Composition API）中。确保你根据Vue的版本调整用法。例如，在Vue 3中，你可能需要使用 v-slot 来访问被缓存的组件：

js 复制代码

 <keep-alive>
  <component :is="currentView" v-slot="{ Component }">
    <transition>
      <Component :key="currentView" />
    </transition>
  </component>
</keep-alive>

通过这些方法，你可以有效地控制哪些组件应该被 <keep-alive> 缓存，从而提高应用的性能和用户体验。