当前位置：首页 > article >正文

谈谈你对vue内置组件keep-alive的了解

article 2024/12/31 4:29:23

1 什么是 keep-alive

keep-alive 是 Vue.js提供的一个内置组件，用于在组件之间切换时缓存其状态。它能够避免组件被销毁，从而保留用户输入的内容和组件的内部状态，这在需要频繁切换视图的应用中尤为重要。

2 基本用法

使用 keep-alive 时，你需要将其作为一个包裹组件，包裹住需要缓存的动态组件。例如：

<template>
  <div>
    <button @click="currentComponent = 'ComponentA'">Component A</button>
    <button @click="currentComponent = 'ComponentB'">Component B</button>
    
    <keep-alive>
      <component :is="currentComponent"></component>
    </keep-alive>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  data() {
    return {
      currentComponent: 'ComponentA'
    };
  },
  components: {
    ComponentA,
    ComponentB
  }
};
</script>

在这个例子中，当你点击按钮切换组件时，当前组件的状态会被保存，返回时不会重新渲染。

3 属性

include
类型：String | Array
功能：指定要缓存的组件。只有与 include 匹配的组件会被缓存。

<keep-alive include="ComponentA">
  <component :is="currentComponent"></component>
</keep-alive>

exclude
类型：String | Array
功能：指定不被缓存的组件。

<keep-alive exclude="ComponentB">
  <component :is="currentComponent"></component>
</keep-alive>

max
类型：Number
功能：设定最大缓存组件数量。当缓存组件超过此数量时，最旧的缓存组件会被销毁。

<keep-alive max="10">
  <component :is="currentComponent"></component>
</keep-alive>

4 生命周期钩子

keep-alive 为其缓存的组件提供了一些特殊的生命周期钩子：

activated: 当组件从缓存中激活时调用。
deactivated: 当组件被缓存时调用。

<script>
export default {
  activated() {
    console.log('Component is activated');
  },
  deactivated() {
    console.log('Component is deactivated');
  }
};
</script>