一般大家在用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才能被缓存，如果就是普通的子组件，它也会被缓存，以此类推该子组件的子组件也会被缓存。
