官网https://cn.vuejs.org/v2/guide/components-dynamic-async.html

使用场景

用来缓存组件,避免多次加载相应的组件,减少性能消耗

选项卡的内容如果是个组件。你每次切换新标签的时候，Vue 都创建了一个新的实例。但是我们想要他不从新加载每次保留开始操作的状态。组件实例能够被在它们第一次被创建的时候缓存下来。

比如在选项卡一里面我修改了单选框性别的选择由默认的男选择了女。当我切换选项卡二再回到选项卡一的时候我希望我仍然选择的是女。而不是从新加载的默认值男。

<template>
  <div>
    <!-- // 每一个 tab 绑定了一个点击事件，传入的参数对应着 tab 下的组件名 -->
    <div class="tabs">
      <div class="tab" :class="{'active': currentTab==='prince'}" @click="toggleTab('prince')"><a>选项卡一</a></div>
      <div class="tab" :class="{'active': currentTab==='rose'}" @click="toggleTab('rose')"><a>选项卡二</a></div>
      <div class="tab" :class="{'active': currentTab==='fox'}" @click="toggleTab('fox')"><a>选项卡三</a></div>
    </div>
    <!-- // 子组件，显示不同的 tab
    // is 特性动态绑定子组件
    // keep-alive 将切换出去的组件保留在内存中 -->
    <!--下面是切换组件，显示的对应的内容-->
    <keep-alive>
      <component :is="currentTab"></component>
    </keep-alive>
  </div>
</template>

<script>
    import prince from './dp/prince'
    import rose from './dp/rose'
    import fox from './dp/fox'
export default {
    components: {
    prince,
    rose,
    fox
 },
  data () {
    return {
      currentTab: 'prince'
    }
  },
  methods: {
    toggleTab (tab) {
      this.currentTab = tab
      // tab 为当前触发标签页的组件名
    }
  }
}
</script>

<style scoped>
h2,p{
  text-align: center;
}
h2{
  font-weight: bold;
  font-size: 20px;
  margin: 10px;
}
.tabs{
  display: flex;
}
.tab{
  flex: 1;
  text-align: center;
  font-size: 18px; 
  height: 80px;
  line-height: 80px; 
}
.tab.active{
  color: #ff4611;
  border-bottom: 2px solid #ff4611;
}
</style>
 

子组件prince，rose，fox里面的内容可以随便写。我为了验证是否组件内容会被缓存。在prince里面写了

<template>
  <div>
          prince,prince,prince,prince,prince,prince,
          prince,prince,prince,prince,prince,prince,
          prince,prince,prince,prince,prince,prince,
         
          <p> 你这里选择了某某个下拉，切换tab选项卡再回来显示的还是原来你切换的。而不是从新加载选择第一个默认的</p>
          <select  v-model="i">
              <option v-for="(item,key) in msg" :key="item" :label="item" :value="key"></option>
          </select>
          <div>{{msg[i]}}</div>
          <p>性别：</p>
          <input type="radio" name="male"  value="male" checked="">男
          <input type="radio" name="male"  value="female"  >女
  </div>
</template>

<script>
export default {
  data () {
    return {
     msg:['11111','22222','33333','44444'],
     i:'1',
    }
  },
  
  created () {
  },
  methods: {

  }
}
</script>

<style>
    
</style>

事实证明我点了下拉和性别的单选框切换走了再回来还是显示我原来选择的内容的。

注意：这是用来缓存组件的。组件组件。。。。件。

-------------------------------------------------------------------------------

上面的例子是所有的组件都缓存了。但是如果希望有点组件缓存，有的组件不缓存应该怎么处理呢？？

include 。 exclude和keep alive连用

include  代表这些页面缓存

exclude 这些页面不缓存

<keep-alive include="prince,fox"><component :is="currentTab"></component>
</keep-alive>

代表name（export default里面设置name）是prince和fox的页面要缓存。

注意：

给每个子组件加一个name的属性。不是在router里面加name。而是直接再页面的export default里面设置name。这个name就对应include里面的那个。。

每个引进的子组件页面都要加name，而不是你需要那个才加那个。