KeepAlive 使用及原理分析

概念： keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。

作用： 在组件切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性。

<template>
  <div id="app">
    <h2>App根组件</h2>
    <hr />
    <button @click="comName = 'leftVue'">展示left组件</button>
    <button @click="comName = 'rightVue'">展示right组件</button>
    <keep-alive>
      <component :is="comName"></component>
    </keep-alive>
    <!-- <component :is="comName"></component> -->
  </div>
</template>

<script>
import leftVue from "./views/leftVue.vue";
import rightVue from "./views/rightVue.vue";
export default {
  name: "App",
  components: {
    leftVue,
    rightVue,
  },
  data() {
    return {
      comName: "leftVue",
    };
  },
};
</script>

<template>
  <div class="left">
    <h3>left组件------{{ count }}</h3>
    <button @click="count += 1">+1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  created() {
    console.log("left组件被创建了");
  },

  destroyed() {
    console.log("left组件被销毁了");
  },

  activated() {
    console.log("组件被激活了,actived");
  },

  deactivated() {
    console.log("组件被缓存了");
  },
};
</script>

<style lang="scss" scoped>
.left {
  width: 800px;
  height: 500px;
  border: 1px solid #ddd;
  background: orange;
}
</style>

keep-alive对应的生命周期函数

当组件被缓存时，会自动触发组件的deactived生命周期函数

当组件被激活时，会自动触发组件的actived生命周期函数

keep-alive的include和exclude属性

在使用keep-alive的时候，可以通过include指定哪些组件需要被缓存，或者，通过exclude属性指定哪些组件不需要缓存，但是不能同时使用