vue使用keep-alive缓存页面

概念

keep-alive 是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件中作为标签使用。

作用

在组件切换过程中 把切换出去的组件保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性

缓存组件

一、缓存所有页面
直接包裹根router-view即可

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

二、缓存部分页面
缓存部分页面，一般有两种方式：

第一种：(结合router.meta)
<template>
      <div id="app">
        <keep-alive >
          <router-view v-if="$route.meta.keepAlive"></router-view>   //放需要缓存的组件
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>  //放不需要缓存的组件
      </div>
</template>

在router/index.js中配置：

{
  path: '/goods',
  name: 'goods',
  component: Goods,
  meta: {
  	keepAlive: false // 不需要缓存
  }
},
{
  path: '/list',
  name: 'list',
  component: List,
  meta: {
  	keepAlive: true // 需要缓存
  }
}

keep-alive的props

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

第二种：(使用新增属性include和exclude)
<keep-alive include="a,b">
   <router-view></router-view>
</keep-alive>
表示只有name(组件的名字)属性为a，b的组件会被缓存
export default {
  name: 'a',
   data () {
     return {}
   }
 }

keep-alive对生命周期函数变化

被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated

activated:组件激活时执行
deactivated:组件失活时执行

使用keepAlive后生命周期：
首次进入缓存页面：beforeRouteEnter --> created --> mounted --> activated --> deactivated
再次进入缓存页面：beforeRouteEnter --> activated --> deactivated

注意：页面被缓存时，created,mounted等生命周期均失效，你若想进行一些操作，那么可以在activated内完成

当页面缓存了，有的功能需要再进入后，仍然重新执行的怎么办？
解决：
事件挂载的方法等，只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中，就可以解决

列表页回到上次浏览的位置

比如：当我们去浏览列表页的时候。点击进入详情页之后返回，我们想让列表页停留在上次浏览的位置。
beforeRouteLeave(to,from,next){ 
	  sessionStorage.setItem('scrollH',document.getElementById('demo').scrollTop)
	  next()
},

activated(){   
    if(sessionStorage.getItem('scrollH')){
  		document.getElementById('demo').scrollTop=sessionStorage.getItem('scrollH')
    }
}