vue的动态缓存组件

使用<keep-alive></keep-alive>包裹组件使得组件不会被销毁，保留当前的状态

    示例：在组件切换时保存当前组件状态，保证组件不会被销毁重新创建    

<template>
  <div class="app">
    <h2>keepAlive的使用</h2>
    <button @click="com = 'MyTop'">展示top组件</button>
    <button @click="com = 'MyFooter'">展示footer组件</button>

    <!-- component是vue内置的组件占位符   is属性表示要展示的组件名称 -->
    <!-- keep-alive缓存组件，组件不会被销毁 -->
    <!-- include属性表示要缓存的组件   exclude表示哪些组件不需要缓存 -->
    <!-- 注意：include和exclude不能同时使用 -->
    <keep-alive include="MyTop,MyFooter">
      <component :is="com"></component>
    </keep-alive>
    <hr />
  </div>
</template>

<script>
import MyTop from "./components/TopVue.vue";
import MyFooter from "./components/FooterVue.vue";

export default {
  name: "App",
  components: {
    MyTop,
    MyFooter,
  },
  data() {
    return {
      com: "MyTop",
    };
  },
};
</script>

<style>
</style>