一般大家在用keep-alive的時(shí)候可能是如下寫(xiě)法：

   <keep-alive>
      <router-view></router-view>
    </keep-alive>

這個(gè)是典型的用法，用于緩存路由組件，官方文檔的解釋是：

圖片.png

對(duì)官方說(shuō)法半信半疑，也不是很理解他里面的動(dòng)態(tài)組件的說(shuō)法，于是自己做了個(gè)demo：

在父組件中嵌套了：

   <keep-alive>
      <topic class="topic-root"></topic>
    </keep-alive>

Topic.vue

export default {
  name: "Topic",
  data() {
    return {
      initData: 9
    }
  },
  methods: {

  },
  beforeMount() {//每次進(jìn)入都會(huì)執(zhí)行
    console.info("topic:beforeMount");
  },
  activated() {//每次進(jìn)入都會(huì)執(zhí)行
    console.info(this);
  }
}

子組件包裹了keep-alive后每次進(jìn)入頁(yè)面都會(huì)執(zhí)行beforeMount和activated，證明靜態(tài)組件是不能被緩存的，官網(wǎng)給出了那些情況會(huì)被緩存：

<!-- 基本 -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>
<!-- 多個(gè)條件判斷的子組件 -->
<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>
<!-- 和 <transition> 一起使用 -->
<transition>
  <keep-alive>
    <component :is="view"></component>
  </keep-alive>
</transition>

還有一種就是上面提到的會(huì)被緩存：

 <keep-alive>
     <router-view></router-view>
 </keep-alive>

安卓手機(jī)是有回退鍵的，那么點(diǎn)擊回退鍵keep-alive還能緩存組件嗎，帶著疑問(wèn)進(jìn)行了pc瀏覽器和移動(dòng)瀏覽器的測(cè)試

經(jīng)過(guò)測(cè)試發(fā)現(xiàn)無(wú)論pc瀏覽器的前進(jìn)后退鍵還是安卓手機(jī)的后退鍵keep-alive都是可以緩存組件的，只有刷新頁(yè)面才會(huì)重新mount組件。

PaperInfo組件是keep-alive的router-view渲染出來(lái)的，所以每次PaperInfo都會(huì)走activted鉤子函數(shù)，而PaperInfo里面又有router-view這時(shí)候如果不被keep-alive包裹的話，其渲染出來(lái)的子組件是不會(huì)被緩存的，在添加keep-alive后子組件Report被緩存了，Report的字組件Topic這時(shí)候也是會(huì)被緩存的，每次都會(huì)走actived鉤子函數(shù)。

小結(jié)：如果當(dāng)前組件的是被緩存的，其子組件是通過(guò)router-view渲染的話，必須加上keep-alive才能被緩存，如果就是普通的子組件，它也會(huì)被緩存，以此類推該子組件的子組件也會(huì)被緩存。