对于keep-alive的理解

介绍

keep-alive是vue内置的一个组件，而这个组件的作用就是能够缓存不活动的组件，我们能够知道，一般情况下，一个路由在切换时会被销毁，之前的数据全部丢失，下次再访问这个组件时，需要重新创建，重新调接口，重新渲染，为了提高性能我们可以使用 keep-alive 把组件缓存起来，这样在组件切换时，这个组件并没有被销毁，下次访问时，可以就可以显示出来，而且原组件中数据还在。

把需要缓存的组件使用 keep-alive 套起来即可。比如：把所有路由页面都缓存起来，在切换时不销毁：

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

参数

• include - 字符串或正则表达，只有匹配的组件会被缓存
• exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存
• max - 数字 。最多可以缓存多少组件实例

还可以使用 include 和 exclude 来设置哪些缓存，哪些不缓存，比如：不缓存登录页：

<keep-alive exclude="login">
    <router-view />
</keep-alive>

列表页回到上次浏览位置

条件：1、列表页不可使用懒加载延迟加载数据，2、列表页需要使用keepAlive缓存

beforeRouteLeave(to,from,next){  //离开页面之前将高度存储到sessionStorage。这里不建议用localStorage，因为session在关闭浏览器时会自动清除，而local则需要手动清除，有点麻烦。
    sessionStorage.setItem('scrollH',document.getElementById('demo').scrollTop)
    next()
},

activated(){   //在activated生命周期内，从sessionStorage中读取高度值并设置到dom
    if(sessionStorage.getItem('scrollH')){
        document.getElementById('demo').scrollTop=sessionStorage.getItem('scrollH')
    }
},

只执行一次的钩子

一般的组件，每一次加载都会有完整的生命周期，即生命周期里面对于的钩子函数都会被触发，为什么被keep-alive包裹的组件却不是呢？
被缓存的组件实例会为其设置keepAlive= true，而在初始化组件钩子函数中：

// src/core/vdom/create-component.js
const componentVNodeHooks = {
    init (vnode: VNodeWithData, hydrating: boolean): ?boolean{
        if (
         vnode.componentInstance &&       
         !vnode.componentInstance._isDestroyed &&
         vnode.data.keepAlive
        ) {
          // keep-alive components, treat as a patch
          const mountedNode:any = vnode
          componentVNodeHooks.prepatch(mountedNode, mountedNode)
        } else {
          const child = vnode.componentInstance = createComponentInstanceForVnode (vnode, activeInstance)
           
        }
    }
}

可以看出，当vnode.componentInstance和keepAlive同时为true时，不再进入$mount过程，那mounted之前的所有钩子函数（beforeCreate、created、mounted）都不再执行。

生命周期函数

被包含在keep-alive中创建的组件,会多出两个声明周期的钩子函数 : activated和deactivated 他们两个都 在keep-alive 组件激活时调用 , 该钩子函数在服务器端渲染期间不被调用。

缓存所有页面

App.vue

 <template>
  <div id="app">
        <keep-alive>
           <router-view></router-view>
         </keep-alive>
    </div>
</template>

根基条件缓存页面

在App.vue里面

router.js缓存部分