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

vue中keep-alive组件的使用

article 2025/3/27 0:22:24

keep-alive是vue的内置组件，它的主要作用是对组件进行缓存，避免组件在切换时被重复创建和销毁，从而提高应用的性能和用户体验。它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。使用时，只需要将需要缓存的组件包裹在keep-alive标签内即可。

使用

首先声明两个组件keepCompont1.vue，keepCompont2.vue

<template>
    <div>
      <p>这是 keepCompont1</p>
      <input v-model="inputValue" placeholder="输入内容">
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        inputValue: ''
      };
    },
    created() {
      console.log('keepCompont1 created');
    },
    mounted() {
      console.log('keepCompont1 mounted');
    },
    activated() {
      console.log('keepCompont1 activated');
    },
    deactivated() {
      console.log('keepCompont1 deactivated');
    },
    destroyed() {
      console.log('keepCompont1 destroyed');
    }
  };
  </script>
  
  <style scoped></style>

<template>
    <div>
      <p>这是 keepCompont2</p>
      <input v-model="inputValue" placeholder="输入内容">
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        inputValue: ''
      };
    },
    created() {
      console.log('keepCompont2 created');
    },
    mounted() {
      console.log('keepCompont2 mounted');
    },
    activated() {
      console.log('keepCompont2 activated');
    },
    deactivated() {
      console.log('keepCompont2 deactivated');
    },
    destroyed() {
      console.log('keepCompont2 destroyed');
    }
  };
  </script>
  
  <style scoped></style>

生命周期里面打印了信息来确认那些生命周期执行了，activated和deactivated是keep-alive组件特有的生命周期，组件被激活执行activated，组件隐藏的时候执行deactivated。对于vue生命周期不理解的可以看下这里，详细说了下生命周期的作用和执行顺序。vue生命周期和应用

父组件代码：

<template>
  <div>
    <button @click="toggleComponent">切换组件</button>
    <keep-alive >
      <!-- is绑定的值即为当前显示的组件，需要切换的时候需要动态绑定。  -->
      <component :is="currentComponent"></component>
    </keep-alive>
  </div>
</template>

<script>
import keepCompont1 from "@/components/keepCompont1.vue";
import keepCompont2 from "@/components/keepCompont2.vue";
export default {
  components: {
    keepCompont1,
    keepCompont2,
  },
  data() {
    return {
        // 默认显示keepCompont1组件
      currentComponent: "keepCompont1",
    };
  },

  methods: {
    // 修改currentComponent的值来切换组件
    toggleComponent() {
        //  this.currentComponent === 'keepCompont2' ? 'keepCompont1' : 'keepCompont2'; 
        //  三元运算符做了一个判断 
        //  this.currentComponent === 'keepCompont2'为true 
        //  则把keepCompont1 赋值给this.currentComponent。false则把keepCompont2赋值过去
      this.currentComponent = this.currentComponent === 
      'keepCompont2' ? 'keepCompont1' : 'keepCompont2';
    },
  },
};
</script>

运行效果：

当页面加载完成后可以看到keepCompont1组件的created，mounted，activated生命周期函数执行了。

keepCompont1组件的输入框输入内容1111,点击切换按钮。keepCompont2组件显示出来且created，mounted，activated生命周期函数执行且keepCompont1组件隐藏了且执行了deactivated

然后我们来验证keepCompont1组件刚才输入的内容1111 是否缓存上了，这里在组件2的输入框里面输入222，然后点击切换按钮。

切换回来后可以看到输入框里面的1111还在，并且从打印的生命周期上可以看到destroyed钩子函数并没有执行也就是说没有销毁在重新创建组件。在次点击切换按钮可以看到组件2里面的2222也是存在的。整个过程destroyed钩子函数都没有执行

keep-alive组件有三个常用的属性：include，exclude，max

include

include值为字符串或正则表达式，只有名称匹配的组件会被缓存，如果不使用include属性则默认缓存所有。这里在创建一个keepCompont3组件，内容和keepCompont1和keepCompont2一样的唯一区别就是修改下生命周期的打印，这里就不在粘贴重复的代码了。稍微修改下父组件

<template>
  <div>
    <button @click="toggleComponent">切换组件</button>
    <!-- 添加一个按钮 用来显示组件3 -->
    <button @click="show3">显示组件3</button>
    <keep-alive include="keepCompont1,keepCompont2">
      <!-- is绑定的值即为当前显示的组件，需要切换的时候需要动态绑定。  -->
      <component :is="currentComponent"></component>
    </keep-alive>
  </div>
</template>

<script>
import keepCompont1 from "@/components/keepCompont1.vue";
import keepCompont2 from "@/components/keepCompont2.vue";
import keepCompont3 from "@/components/keepCompont3.vue";
export default {
  components: {
    keepCompont1,
    keepCompont2,
    keepCompont3
  },
  data() {
    return {
        // 默认显示keepCompont1组件
      currentComponent: "keepCompont1",
    };
  },

  methods: {
    // 修改currentComponent的值来切换组件
    toggleComponent() {
        // this.currentComponent === 'keepCompont2' ? 'keepCompont1' : 'keepCompont2'; 三元运算符做了一个判断 
        //  this.currentComponent === 'keepCompont2'为true 则把keepCompont1 赋值给this.currentComponent。
        // false则把keepCompont2赋值过去
      this.currentComponent = this.currentComponent === 
      'keepCompont2' ? 'keepCompont1' : 'keepCompont2';
    },
    show3(){
        this.currentComponent = 'keepCompont3'
    }
  },
};
</script>

这里include没有包含keepCompont3组件，当组件3隐藏在出现的时候不会缓存输入框里面的值，因为组件被销毁了，执行了destroyed生命周期函数

这里可以看到当最后进入组件3的时候，组件3的created钩子函数也执行了，说明组件又重新创建了。

exclude

值为字符串或正则表达式，名称匹配的组件不会被缓存。

 <keep-alive include="keepCompont1,keepCompont2,keepCompont2" exclude="keepCompont2">
      <!-- is绑定的值即为当前显示的组件，需要切换的时候需要动态绑定。  -->
      <component :is="currentComponent"></component>
    </keep-alive>

运行效果