Vue 3 的 keep-alive 及生命周期钩子

原创

已于 2025-01-22 17:12:48 修改 · 1.8k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript #onDeactivated #onActivated

于 2025-01-22 17:11:20 首次发布

在 Vue 3 中，keep-alive 是一个内置组件，用于提高性能和减少不必要的组件销毁与重建。它与组件的生命周期紧密相关，特别是在动态组件和路由切换场景下，能够缓存组件的状态并避免重新渲染。

而 onActivated 和 onDeactivated 是 Vue3 Composition API 提供的钩子函数，专门用于处理被 keep-alive 缓存组件的激活和销毁逻辑。

1. keep-alive

1.1 什么是 keep-alive？

在 Vue 中，keep-alive 是一个内置的高阶组件，用于缓存不再活跃的组件实例，使其在不再渲染时依然保留状态。通过，在需要频繁切换视图组件或动态组件时使用 keep-alive，这样可以避免频繁销毁和重新创建组件，从而提高性能。

eg：很多情况下，当在多个选项卡或页面之间切换时，可能会希望保留每个选项卡的状态，而不是每次切换时都销毁再重新加载它们。此时，keep-alive 就可以解决这个问题。

1.2 基本使用

keep-alive 可以包裹动态组件或页面，当使用时，它会缓存已渲染的组件，并将其状态保持在内存中。当组件再次被激活时，keep-alive 会复用该组件的实例，而不是重新创建一个新的组件。

🌰 子组件 A + B 类似

<template>
  <div>
    <h2>这是组件A</h2>
    <p>这是组件A的内容</p>
  </div>
</template>

<script>
export default {
  name: 'ComponentA',
  mounted() {
    console.log('ComponentA 被挂载');
  },
  unmounted() {
    console.log('ComponentA 被卸载');
  },
};
</script>

App. vue

<template>
  <div>
    <button @click="switchComponent">切换组件</button>
    <keep-alive>
      <component :is="currentComponent"></component>
    </keep-alive>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import ComponentA from './components/ComponentA.vue';
import ComponentB from './components/ComponentB.vue';

export default defineComponent({
  name: 'App',
  setup() {
    // 当前渲染的组件，直接引用组件
    const currentComponent = ref(ComponentA);

    // 切换组件的逻辑
    const switchComponent = () => {
      currentComponent.value = JSON.stringify(currentComponent.value) === JSON.stringify(ComponentA) ? ComponentB : ComponentA;
    };

    return {
      currentComponent,
      switchComponent,
    };
  },
});
</script>

展示如下：