撰于 阅读 68

Vue 中 KeepAlive 的用法全解析

1. 前言

在 Vue 开发过程中，我们常常会碰到组件频繁切换的情况。大家都知道，组件每一次切换时的创建与销毁，其实都在消耗着系统资源，这可能会对应用的性能产生影响，甚至让用户体验大打折扣。而 Vue 为我们提供的 KeepAlive 组件，就像是一把优化性能的利器。它能够将那些需要频繁切换的组件实例缓存起来，当再次用到这些组件时，直接从缓存中调取，而不是重新创建，从而显著提升应用的运行效率与响应速度。无论是小型项目还是大型复杂应用，了解并掌握 KeepAlive 的用法，都能帮助我们更好地优化 Vue 应用，让我们的开发工作更加得心应手。接下来，咱们就深入地了解一下它的具体用法。

2. KeepAlive 基本概念与用法

KeepAlive 是 Vue 内置的一个组件，其核心作用就是缓存组件实例。在一般的 Vue 应用场景里，比如通过 v - if 或者 v - show 指令切换组件，又或者是在路由切换时的 部分，组件默认是会被销毁然后重新创建的。但 KeepAlive 改变了这种模式。
假设我们有 ComponentA 和 ComponentB 这两个组件，并且在页面上需要来回切换它们的显示。示例代码如下：

<template>
    <div>
        <button @click="showA = true; showB = false">显示组件 A</button>
        <button @click="showA = false; showB = true">显示组件 B</button>
        <Keep - Alive>
            <component v - if="showA" :is="ComponentA"></component>
            <component v - if="showB" :is="ComponentB"></component>
        </Keep - Alive>
    </div>
</template>
<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
export default {
    components: {
        ComponentA,
        ComponentB
    },
    data() {
        return {
            showA: true,
            showB: false
        };
    }
};
</script>

从这个例子可以看到，当我们在切换 ComponentA 和 ComponentB 时，由于有 KeepAlive 的存在，它们的实例会被缓存起来。这样，下次再次显示被隐藏的组件时，就不需要重新经历创建组件的整个过程，而是直接使用之前缓存好的实例，大大提高了切换的效率。

3. KeepAlive 生命周期钩子的变化

当我们使用 KeepAlive 来缓存组件时，组件原本的生命周期钩子的执行情况会有所改变。正常情况下，一个组件创建时，会依次触发 beforeCreate、created、beforeMount、mounted 这些生命周期钩子，而在销毁时，则会调用 beforeDestroy 和 destroyed。
然而对于被 KeepAlive 缓存的组件，在初次创建时，生命周期钩子的执行和正常情况一样。但当组件被隐藏，也就是从 DOM 中移除时，它并不会执行 beforeDestroy 和 destroyed 钩子，因为它并没有真正被销毁。当这个组件再次被显示时，会调用 activated 钩子，我们可以利用这个钩子来执行一些当组件重新激活时需要做的事情，比如重新获取数据等操作。而当组件被其他组件替换掉，例如在 KeepAlive 包裹的多个组件之间切换到别的组件时，会调用 deactivated 钩子，在这个钩子中，我们可以进行一些清理工作，比如清除定时器等。
例如在 ComponentA 组件中添加相关生命周期钩子的代码如下：

export default {
    //...其他代码
    activated() {
        console.log('组件 A 被重新激活了');
        // 在这里可以进行重新获取数据等操作
    },
    deactivated() {
        console.log('组件 A 被停用了');
        // 可以在这里进行清理定时器等操作
    }
};

4. KeepAlive 缓存多个组件及缓存策略

KeepAlive 具备同时缓存多个组件的能力。如果有多个组件都处于 KeepAlive 的包裹之下，它们都会遵循上述的缓存规则。
此外，KeepAlive 还提供了 include 和 exclude 这两个属性，以便我们更加灵活地控制缓存策略。include 属性可以接受一个字符串或者正则表达式，用来明确指定哪些组件需要被缓存。而 exclude 属性则是用来指定哪些组件不需要被缓存。
比如我们有 ComponentA、ComponentB 和 ComponentC 三个组件，现在只想缓存 ComponentA 和 ComponentB，那么代码可以这样写：

<Keep - Alive include="ComponentA,ComponentB">
    <component v - if="showA" :is="ComponentA"></component>
    <component v - if="showB" :is="ComponentB"></component>
    <component v - if="showC" :is="ComponentC"></component>
</Keep - Alive>

在这种情况下，ComponentC 就不会被 KeepAlive 缓存，每次当 showC 的值发生变化导致 ComponentC 显示时，都会重新创建该组件实例。

5.结语

通过对 Vue 中 KeepAlive 组件的学习，我们清楚地认识到它在缓存组件实例、优化组件切换性能以及灵活控制缓存策略等方面所发挥的重要作用。合理地运用 KeepAlive 组件，能够有效地提升 Vue 应用的整体性能和用户体验。在实际的项目开发过程中，我们需要根据具体的业务需求和应用场景，巧妙地运用 KeepAlive 及其相关特性，精心规划好每一个组件的生命周期与缓存机制，以此打造出更加高效、流畅且用户友好的 Vue 应用。不断地探索和实践 Vue 中的这些高级特性，有助于我们在 Vue 开发的道路上持续进步，创造出更加出色的应用产品。

#vue