keep-alive 缓存的是动态组件

一般大家在用keep-alive的时候可能是如下写法：

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

这个是典型的用法，用于缓存路由组件，官方文档的解释是：

图片.png

对官方说法半信半疑，也不是很理解他里面的动态组件的说法，于是自己做了个demo：

在父组件中嵌套了：

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

Topic.vue

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

  },
  beforeMount() {//每次进入都会执行
    console.info("topic:beforeMount");
  },
  activated() {//每次进入都会执行
    console.info(this);
  }
}

子组件包裹了keep-alive后每次进入页面都会执行beforeMount和activated，证明静态组件是不能被缓存的，官网给出了那些情况会被缓存：

<!-- 基本 -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>
<!-- 多个条件判断的子组件 -->
<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>

还有一种就是上面提到的会被缓存：

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

安卓手机是有回退键的，那么点击回退键keep-alive还能缓存组件吗，带着疑问进行了pc浏览器和移动浏览器的测试

经过测试发现无论pc浏览器的前进后退键还是安卓手机的后退键keep-alive都是可以缓存组件的，只有刷新页面才会重新mount组件。

PaperInfo组件是keep-alive的router-view渲染出来的，所以每次PaperInfo都会走activted钩子函数，而PaperInfo里面又有router-view这时候如果不被keep-alive包裹的话，其渲染出来的子组件是不会被缓存的，在添加keep-alive后子组件Report被缓存了，Report的字组件Topic这时候也是会被缓存的，每次都会走actived钩子函数。

小结：如果当前组件的是被缓存的，其子组件是通过router-view渲染的话，必须加上keep-alive才能被缓存，如果就是普通的子组件，它也会被缓存，以此类推该子组件的子组件也会被缓存。