keep-alive

1.keep-alive是Vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能

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

3.关于这一点也是仁者见仁，有的产品可能会要求在每一次进入一个组件时页面的初始位置都是保持在顶部的，这里可以利用Vue中的滚动行为，但是前提是你是HTML5 history模式

4.我们在创建一个router实例的时候，可以提供一个scrollBehavior（滚动行为）方法，该方法会在用户切换路由时触发
scrollBehavior方法接收to，form路由对象

• 第三个参数savedPosition当且仅当在浏览器前进后退按钮触发时才可用
• 该方法会返回滚动位置的对象信息，如果返回false，或者是一个空的对象，那么不会发生滚动
• 我们可以在该方法中设置返回值来指定页面的滚动位置，例如：return {x:0,y:0}
• 表示在用户切换路由时让是所有页面都返回到顶部位置
• 如果返回savedPosition,那么在点击后退按钮时就会表现的像原生浏览器一样，返回的页面会滚动过到之前按钮点击跳转的位置，大概写法如下：

const router=new VueRouter({
        routes:[
            {
                path:"/",
                component:Home
            }
        ],
        scrollBehavior(to,form,savedPosition){
         	if(savedPosition){
            	return savedPosition
         	}else{
           		return {x:0,y:0}
         	}
         	//如果想要模拟滚动到锚点的行为:
         	if(to.hash){
           		return {
             		selector:to.hash
           		}
         	}
     	}
})

还有一个方法就是利用我们上面说的，在keep-alive激活会触发actived钩子函数，那么在该函数内设置scrollTop为0

5.被keep-alive包裹的动态组件或者router-view会缓存不活动的实例，再次被调用这些被缓存的实例会被再次复用，对于我们的某些不是需要实时更新的页面来说大大减少了性能上的消耗，不需要再次发送HTTP请求，但是同样也存在一个问题就是被keep-alive包裹的组件我们请求获取的数据不会再重新渲染页面，这也就出现了例如我们适用动态路由做匹配的话页面只会保持第一次请求数据的渲染结果，所以需要我们在特定的情况下强制刷新某些组件
（1）利用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的组件不会被缓存，其它组件都会被缓存

（2）利用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>
<!--这里是不会被缓存的组件-->

（3）官方提出的解决方案响应路由参数的变化
（4）利用berforeRouteEnter实现前进刷新，后退缓存资料
（5）利用第三方插件实现前进刷新，后退不缓存（我是不推荐这个的对于新手来说，面试的时候傻眼，工作时候随你便）

以上参考：https://www.jianshu.com/p/4b55d312d297

使用keep-alive后，mounted生命周期函数不会每次都触发（只有刷新组件的时候才起作用），而vue新增了activated和deactivated函数，所以我们可以在activated函数里执行一些操作，这个时候activated就和没有使用keep-alive时的mounted生命周期函数差不多的作用，deactivated函数里面可以做一些离开组件时的操作和没有使用keep-alive时的desrtoyed生命周期函数差不多的作用。
原文链接https://blog.csdn.net/weixin_41615439/article/details/86605107

这个讲的更深入一点：https://www.jianshu.com/p/9523bb439950