Vue 中＜keep-alive＞功能介绍，使用场景，完整使用示例演示

原创于 2025-10-29 18:28:24 发布 · 896 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

前端专栏收录该内容

72 篇文章

订阅专栏

以下是关于 Vue 中 <keep-alive> 的功能介绍、使用场景和完整使用示例演示：

功能介绍

缓存组件实例：“<keep-alive>”是 Vue 提供的一个内置抽象组件，用于缓存不活动的组件实例，而不是销毁它们。它自身不渲染任何 DOM 元素，但能保留被包裹组件的状态（包括数据、DOM 状态等），避免重复渲染导致的组件状态丢失[¹][⁵]。
性能优化：通过减少组件的创建和销毁开销来提高应用性能。在频繁切换组件的场景下，使用 “<keep-alive>” 可以避免每次都重新加载和初始化组件，从而提升用户体验[¹][⁶]。
灵活的控制方式：提供了 include、exclude 和 max 属性来进行更精细的缓存控制。include指定需要缓存的组件名称（支持字符串、正则表达式或数组）；exclude指定不需要缓存的组件；max限制缓存的最大组件数量，超出时会自动销毁最久未使用的实例（采用 LRU 算法）[²][⁶]。
特有的生命周期钩子：被 “<keep-alive>” 包裹的组件会多出两个生命周期钩子，即 activated（当组件被激活，也就是切换到前台时调用）和 deactivated（当组件被停用，也就是切换到后台时调用）。开发者可以在这些钩子中执行相应的逻辑，如数据更新、定时器的启动与清除等[⁵][⁶]。

使用场景

动态组件切换：适用于使用 <component :is="currentComponent"> 实现标签页或视图切换的情况，可保留离开时的状态，如表单输入内容、滚动位置等[⁶]。例如后台管理系统中的多标签页，每个标签页对应不同的功能模块，切换时保持之前的查询条件、排序状态以及滚动位置等[³]。
路由视图缓存：在单页应用（SPA）中结合 Vue Router 的 <router-view> 使用，避免页面切换时重复发起数据请求。比如列表页跳转到详情页后返回时，能保持列表的滚动位置和已加载的数据[¹][⁶]。
表单状态保持：在多步骤表单中，用户可能需要在不同步骤间来回切换，使用 “<keep-alive>” 可以确保用户在返回某个步骤时，之前填写的内容不会丢失[²][³]。
选项卡式内容展示：对于采用选项卡形式展示不同内容的页面，如产品介绍页面的产品规格参数、用户评价、使用教程等，切换选项卡时可缓存每个选项卡对应的组件状态，加快渲染速度，提升性能[³]。
轮播图中的组件：在一些带有轮播图的页面中，轮播图的每个面板作为独立组件，使用 “<keep-alive>” 确保每个组件只加载一次，后续切换从缓存获取，使轮播更流畅，减少资源消耗[³]。
分步式流程引导：在一些需要引导用户完成一系列操作的流程中，如注册流程、申请流程等，将流程分为多个步骤，每个步骤是一个独立的组件。使用 “<keep-alive>” 可以在用户完成一个步骤进入下一个步骤后，仍然保留上一个步骤组件的状态，方便用户返回修改[³]。

完整使用示例演示

示例一：基本的动态组件切换

模板代码（Template）:

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

脚本代码（Script）:

export default {
    data() {
        return {
            currentComponent: 'ComponentA',
        };
    },
    methods: {
        toggleComponent() {
            this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';
        },
    },
    components: {
        ComponentA: {
            template: `<div>这是组件 A 的内容</div>`,
            activated() {
                console.log('ComponentA activated');
            },
            deactivated() {
                console.log('ComponentA deactivated');
            },
        },
        ComponentB: {
            template: `<div>这是组件 B 的内容</div>`,
            activated() {
                console.log('ComponentB activated');
            },
            deactivated() {
                console.log('ComponentB deactivated');
            },
        },
    },
};

在这个例子中，点击按钮可以在 ComponentA 和 ComponentB 之间切换。由于使用了 “<keep-alive>”，切换后之前组件的状态得以保留，并且会在控制台输出相应的 activated 和 deactivated 日志。

示例二：与路由结合实现页面缓存

模板代码（Template）:

<div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <keep-alive>
        <router-view></router-view>
    </keep-alive>
</div>

路由配置（Router Configuration）:

const routes = [
    { path: '/home', component: Home, meta: { keepAlive: true } }, // 需要缓存的路由
    { path: '/about', component: About, meta: { keepAlive: false } }, // 不需要缓存的路由
];

组件代码（以 Home 组件为例）:

export default {
    name: 'Home', // 必须定义 name，以便 keep-alive 根据 name 进行匹配缓存
    data() {
        return {
            message: '欢迎来到首页！',
        };
    },
    activated() {
        console.log('Home 组件被激活');
    },
    deactivated() {
        console.log('Home 组件被停用');
    },
};

在这个示例中，“<keep-alive>” 包裹了 <router-view>”，会根据路由的配置来决定是否缓存对应的组件。当用户在首页和其他页面之间切换时，首页的状态会被保留，再次进入首页时会直接从缓存中获取组件实例，而不会重新创建。同时，在控制台可以看到组件的activated和deactivated` 事件触发情况。

示例三：带条件的缓存控制

模板代码（Template）:

<div id="app">
    <button @click="changeTab">切换标签页</button>
    <keep-alive include="Tab1,Tab2" :max="2">
        <component :is="currentTab"></component>
    </keep-alive>
</div>

脚本代码（Script）:

export default {
    data() {
        return {
            currentTab: 'Tab1',
        };
    },
    methods: {
        changeTab() {
            this.currentTab = this.currentTab === 'Tab1' ? 'Tab2' : 'Tab1';
        },
    },
    components: {
        Tab1: {
            template: `<div>这是标签页 1 的内容</div>`,
            activated() {
                console.log('Tab1 activated');
            },
            deactivated() {
                console.log('Tab1 deactivated');
            },
        },
        Tab2: {
            template: `<div>这是标签页 2 的内容</div>`,
            activated() {
                console.log('Tab2 activated');
            },
            deactivated() {
                console.log('Tab2 deactivated');
            },
        },
        Tab3: { // 这个组件不会被缓存，因为不在 include 列表中
            template: `<div>这是标签页 3 的内容</div>`,
        },
    },
};