vue的keep-alive特性（缓存组件）

1.keep-alive是Vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在v页面渲染完毕后不会被渲染成一个DOM元素

<keep-alive>
    <loading></loading>
</keep-laive>

2.当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行

被包裹在keep-alive中的组件的状态将会被保留，例如我们将某个列表类组件内容滑动到第100条位置，那么我们在切换到一个组件后再次切换回到该组件，该组件的位置状态依旧会保持在第100条列表处

3.利用include、exclude属性

<keep-alive include="bookLists,bookLists">
      <router-view></router-view>
</keep-alive>
<keep-alive exclude="indexLists">
      <router-view></router-view>
</keep-alive>

include属性表示只有name属性为bookLists，bookLists的组件会被缓存，（注意是组件的名字，不是路由的名字）其它组件不会被缓存exclude属性表示除了name属性为indexLists的组件不会被缓存，其它组件都会被缓存

4.利用meta属性

export default[
 {
  path:'/',
  name:'home',
  components:Home,
  meta:{
    keepAlive:true //需要被缓存的组件
 },
 {
  path:'/book',
  name:'book',
  components:Book,
  meta:{
     keepAlive:false //不需要被缓存的组件
 } 
]

<keep-alive>
  <router-view v-if="this.$route.meat.keepAlive"></router-view>
  <!--这里是会被缓存的组件-->
</keep-alive>
<keep-alive v-if="!this.$router.meta.keepAlive"></keep-alive>
<!--这里是不会被缓存的组件-->

注意：但是同样也存在一个问题就
1.是被keep-alive包裹的组件我们请求获取的数据不会再重新渲染页面，这也就出现了例如我们使用动态路由做匹配的话页面只会保持第一次请求数据的渲染结果，所以需要我们在特定的情况下强制刷新某些组件（这个问题在当时的学生行为数据与教师行为数据页面出现过这个问题。这两个页面其实是一个页面，也是一个路由通过参数teach与stu动态匹配，当时因为头部的查询条件与下面的内容稍有区别，在每次切换时需要重新回显各自（教师与学生页面）的内容。这个问题最简单的办法是1.使用keep-alive的:key=“pathfull”。但:key=“pathfull”这个会有个问题就是：页面每次都会闪跳下。2.第二个办法是：在两个页面都监听路由参数的变化，对应在这个页面使用v-show来显示学生还是教师内容（学生教师内容分别分写）。