浅聊一下

在我们的项目中，时常会碰到组件切换的问题，从A组件切换到B组件，会经历渲染和销毁等阶段，当我们重新切换回A组件时，又要重新挂载，由此观之，这个过程会经历多次重新渲染和组件销毁，消耗性能。那么我们今天要聊的就是如何来缓存我们的组件，使其不被销毁...

KeepAlive

首先请出我们的老朋友，首页和关于先生

我将使用这两个组件来向大家演示如何进行组件缓存...来到App.vue,使用以下方法，将router-view包裹起来

js 复制代码

<template>
  <div>
    <nav>
      <router-link to="/">首页|</router-link>
      <router-link to="/about">关于</router-link>
    </nav>
    <router-view v-slot="{ Component }">
      <keep-alive :include="['Home']">
        <component :is="Component" />
      </keep-alive>
    </router-view>
  </div>
</template>

这里使用到了v-slot插槽，通过 v-slot 指令，我们可以访问到 <router-view> 的默认插槽，并将插槽内容赋值给变量 Component。然后我们在:include中添加自己想要缓存的组件，我们这里只添加Home组件来与About组件形成对比。

那么，我们怎么才能知道Home页面是否缓存了呢？那就不得不提到KeepAlive的两个生命周期钩子activated和deactivated了

activated 和 deactivated

activated 是 Vue Router 提供的一个生命周期钩子函数，用于在路由组件被激活时执行相应的逻辑。当路由切换到某个组件时，如果该组件之前已经被渲染过（通过 <keep-alive> 缓存），那么在组件被再次激活时，activated 钩子函数会被调用（第一次挂载也会调用）。

deactivated用于在路由组件被停用时执行相应的逻辑。当路由从某个组件切换到其他组件时，如果该组件之前已经被渲染过（通过 <keep-alive> 缓存），那么在组件被停用时，deactivated 钩子函数会被调用。

需要注意的是，不论是activated还是deactivated，只有在组件被KeepAlive缓存起来，activated或deactivated才会存在...

接下来，我们来演示一下activated,分别给Home和About加上如下代码，记录一下组件挂载和卸载

js 复制代码

onMounted(()=>{
    console.log('Home mounted');
})
onUnmounted(()=>{//当组件被卸载时触发
    console.log('Home unmounted');
})
onMounted(()=>{
    console.log('About mounted');
})
onUnmounted(()=>{
    console.log('About unmounted');
})

来到首页

此刻，Home组件被挂载，打印 Home mounted 和 Home activated（在第一次挂载时也会调用activated）

点击去到关于

此时，Home组件停用，触发 deactivated，About页面挂载，打印Home deactivated 和 About mounted ，并且，这个过程中没有触发Home组件的onUnMounted生命周期钩子

回到首页

回到首页，触发activated生命周期钩子，并且About组件触发了onUnmounted生命周期钩子

通过以上的对比，我相信KeepAlive和他的生命周期钩子你就已经全部理解了，那么你还需要了解的就是他们的使用场景。

使用场景

activated 和 deactivated 钩子函数都是用于处理页面组件在路由切换过程中的生命周期事件，它们可以用于一些特定的场景，下面是它们的主要使用场景：

数据加载和清理：
- activated 可以用来在组件被激活时加载数据，比如发送网络请求获取数据。
- deactivated 可以用来在组件被停用时清理数据，比如取消网络请求、清除定时器或清理临时状态。
页面状态保存和恢复：
- 通过 activated 和 deactivated 可以在组件被激活和停用时保存和恢复页面的状态，例如滚动位置、表单输入内容等。
性能优化：
- 使用 activated 可以在组件激活时做一些性能优化的操作，例如懒加载图片或其他资源。
- 使用 deactivated 可以在组件停用时释放一些资源，以减少内存占用。
监控和日志记录：
- 可以利用 activated 和 deactivated 来监控页面组件的激活和停用情况，并记录日志信息。

总之，activated 和 deactivated 钩子函数可以帮助你在页面组件生命周期中进行更精细的控制，从而实现数据管理、页面状态管理、性能优化和监控日志等方面的需求。

结尾

在实际开发中，我们可以根据具体情况选择是否使用KeepAlive来缓存组件。一般来说，如果页面数据比较复杂或者需要频繁切换的组件，使用KeepAlive会有更好的用户体验和性能表现。

但是需要注意的是，由于KeepAlive会缓存组件，所以可能会带来一些副作用，比如组件状态不同步、内存占用过高等问题。因此，在使用KeepAlive时，需要仔细考虑缓存策略，避免出现意料之外的问题。

该学会用KeepAlive了宝！

浅聊一下

KeepAlive

activated 和 deactivated

使用场景

结尾