Vue之keep-alive组件

1、有何作用

        有时候我们并不想重复渲染某个组件或者出于对于网站性能优化的原因，希望某个组件的信息可以缓存下来，这时候可以使用keep-alive组件

引自官网

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。 主要用于保留组件状态或避免重新渲染

2、keep-alive 生命周期

• 初次进入时：created => mounted => activated；退出后触发 deactivated;
• 再次进入：会触发 activate，组件每次进去执行的方法都会放在 activated 中。

3、代码示例 

我们需要在路由中设置属性来判断进入的组件是否需要缓存，这时候就要用到我们的路由守卫

<div id="app" class='wrapper'>
    <keep-alive>
        <!-- 需要缓存 --> 
        <router-view v-if="$route.meta.keepAlive"></router-view>
     </keep-alive>
      <!-- 不需要缓存 -->
     <router-view v-if="!$route.meta.keepAlive"></router-view>
</div>

路由中设置相关属性

{
  path: 'list',
  name: 'list',
  component：list
 },
 meta: {
  keepAlive: true,
  title: '列表页'
 }
}

使用beforeEach钩子判断进入组件前是否需要缓存，可以自己设置路由的meta对象中的属性，实现动态缓存

4、记录滚动位置(进阶)

keep-alive虽然可以缓存组件信息，但是并不会记录当前页面的滚动位置，但是他提供了两个生命钩子，我们可以这样实现，看代码。

deactivated () {

//使用localstorge或者sessionstorge都可以
 window.localStorage.setItem("top", JSON.stringify({
 listTop: this.scrollTop
 }))
}

在组件退出的时候，我们将滚动的高度记录并存储在本地存储上，那么当页面进入组件时，我们通过activated钩子去滚动到相应位置

//有的组件没有滚动，有可能我们拿到的值为空，所以需要判断一下

let topdata= window.localStorage.getItem("top")？JSON.parse(window.localStorage.getItem("top") : null