聊聊vue中的keep-alive

今天我们来聊聊 Vue 中的 <keep-alive> 组件，这是一个非常强大的功能，可以显著提升用户体验和应用性能

keep-alive是什么？

在 Vue.js 中，内置组件 <keep-alive> 用于缓存动态组件的状态。这一组件对于提升性能和用户体验非常有用，尤其是在频繁切换组件时

效果展示

代码示例

接下来我们做一个demo，目录结构为

src/
├── components/
│   ├── Home.vue
│   └── About.vue
├── App.vue
└── router/
    └── index.js

• Home

<template>
  <div>
    <h1>Home</h1>
    <p>当前时间：{{ currentTime }}</p>
    <button @click="updateTime">更新时间</button>
  </div>
</template>

<script setup>
import { ref, onActivated, onDeactivated } from "vue";

const currentTime = ref(new Date().toLocaleTimeString());

const updateTime = () => {
  currentTime.value = new Date().toLocaleTimeString();
};

onActivated(() => {
  console.log("Home组件激活");
});
onDeactivated(() => {
  console.log("Home组件失活");
});
</script>

• About

<template>
  <div>
    <h1>About</h1>
    <p>这里是关于页面</p>
  </div>
</template>

<script setup>
import { onActivated, onDeactivated } from "vue";
onActivated(() => {
  console.log("About组件激活");
});
onDeactivated(() => {
  console.log("About组件失活");
});
</script>

• router

import { createRouter, createWebHistory } from "vue-router";
import Home from "../components/Home.vue";
import About from "../components/About.vue";

const routes = [
  { path: "/", name: "Home", component: Home },
  { path: "/about", name: "About", component: About },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

• App

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>
  </div>
</template>

<script>
export default {};
</script>

<style>
nav {
  margin-bottom: 20px;
}
</style>

运行结果

首先，我们进入 Home 页面，此时控制台输出当前时间，假设显示为 12:47:44。在这个页面上，用户可以看到当前时间，并且该时间会随按钮点击而更新

接下来，我们跳转到 About 页面。在这一过程中，Home 组件失活，About 组件被激活。此时，Home 组件的状态，包括当前时间，将被缓存

当我们再次返回到 Home 页面时，可以观察到，时间显示仍然是之前的 12:47:44。这表明组件的状态被成功缓存，用户回到该页面时能够看到之前的时间，而不是重置为当前时间

通过这个示例，我们可以清晰地看到 <keep-alive> 的优势。它不仅能够缓存组件的状态，还能提高用户体验，避免频繁的重新渲染和数据请求

总结

使用 <keep-alive> 组件可以有效地缓存 Vue 组件，从而提高应用性能和用户体验。当一个组件被缓存时，它的状态和数据会被保留，用户在切换回该组件时能够看到之前的状态。

如果需要在组件消失时执行特定的操作（例如，清理资源、保存状态或停止定时器），可以将相关的方法定义在 onDeactivated 钩子中。这样，当组件被去激活时，这些方法会自动执行，确保组件在被移除前能够完成必要的清理工作。

这种方式不仅提高了代码的可读性，还能有效管理组件的生命周期，避免内存泄漏等问题。通过合理使用 onActivated 和 onDeactivated 钩子，可以更好地控制组件的行为和状态。