笔记：vue组件缓存

问题：

从首页切换到我的，再从我的回到首页，我们发现首页重新渲染原来的状态没有了。首先，这是正常的状态，并非问题，路由在切换的时候会销毁切出去的页面组件，然后渲染匹配到的页面组件。但是我想要某些页面保持状态，而不会随着路由切换导致重新渲染。

解决方法：

使用 keep-alive 缓存组件

官方文档：在动态组件上使用 keep-alive

生命周期：

钩子函数	执行时机
beforeCreate	初始渲染执行，缓存后不再执行，除非重新渲染
created	初始渲染执行，缓存后不再执行，除非重新渲染
beforeMount	初始渲染执行，缓存后不再执行，除非重新渲染
mounted	初始渲染执行，缓存后不再执行，除非重新渲染
beforeUpdate	更新前执行，不受缓存影响
updated	更新后执行，不受缓存影响
activated	被 keep-alive 缓存的组件激活时调用（包括首次渲染激活），没有缓存不会调用
deactivated	被 keep-alive 缓存的组件停用时调用，没有缓存不会调用
beforeDestroy	组件销毁前执行，缓存后不再执行，除非清除缓存（相当于销毁组件）
destroyed	组件销毁后执行，缓存后不再执行，除非清除缓存（相当于销毁组件）

使用keep-alive标签包裹根路由

include 和 exclude 属性允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示。

<template>
  <div id="app">
    <!--
      一级路由出口
      缓存一级路由组件
    -->
    <keep-alive :include="['layoutIndex']">
      <router-view />
    </keep-alive>
  </div>
</template>

 解决组件缓存后滚动条问题：

在当前滚动条的组件里写在mounted里，在data声明数据scrollTop。

//注：debounce是防抖处理

  mounted(){
    //获取滚动位置
    const articleList = this.$refs['article-list']
    articleList.onscroll = debounce(()=>{
      this.scrollTop = articleList.scrollTop
    },50)
  }

然后在deactivated生命周期中回归滚动位置

activated(){
      //组件被激活
      this.$refs['article-list'].scrollTop = this.scrollTop

  },

解决组件缓存用户数据不更新问题：

控制:include="['layoutIndex']这个数组来实现

首先在vux的state中定义

 state: {//存放数据

    cachePage:['layoutIndex']   //缓存控制的数据
  },

在mutations中定义

  mutations: {//state成员操作作

      //添加缓存页面
    addCachPage(state,pageName){
        if(!state.cachePage.includes(pageName)){
            state.cachePage.push(pageName)
        }
    },
    //移除缓存页面
    removCachePage(state,pageName){
      const index = state.cachePage.indexOf(pageName)
      if(index !== -1){
          state.cachePage.splice(index,1)
      }
    }
  }

在登录成功后清除

this.$store.commit('removCachePage','layoutIndex')

在layoutIndex组件中继续让它缓存

  mounted(){
    this.$store.commit('addCachPage','layoutIndex')
  }

个人学习记录