Vue缓存组件或页面实用技巧 - keepAlive销毁

Posted 2022-09-26

假设在一个列表中，用户滑动几页点击了详情，此时若再回到列表页，页面状态都已经刷新，用户又需要再进行滑动，这显然是不合理的。

在PC端我们有很多天然优势可以处理这类问题，比如使用分页器让列表不要过长，比如打开详情跳转个新标签页，又或者将详情页面做成抽屉，做成遮罩弹窗等等。。但是在移动端开发中，我们无法避免这个问题，所以有时候就必须记录下页面的状态，让用户在返回时保持页面原有的样子。

在Vue中，我们可以很方便的使用​​keep-alive​​来缓存页面，通常情况下，我们可以通过如下方式改写路由视图：

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>

如上使用了两个if判断，不然会不生效

<!-- 错误写法： -->
<keep-alive v-if="$route.meta.keepAlive">
    <router-view></router-view>
</keep-alive>
    <router-view v-else></router-view>

然后我们在需要缓存的页面路由处设置meta即可：

    path: "/activityList",
    name: "activityList",
    title: "活动列表",
    meta:  keepAlive: true ,
    component: () => import("@/pages/activity/list.vue")

这种就是最常用的方式，在使用了keepAlive之后的页面，生命周期会发生一些变化，比如create和mounted这种页面初始化相关的钩子只会执行一次，因为页面的状态已经不会自动改变了，同时有两个额外的生命周期钩子会生效，分别是：

activated() 
    // 页面重回
,
deactivated() 
    // 页面离开

除此之外使用了keepAlive还有一个副作用，我们会发现页面无法卸载了，也就是销毁的生命周期不再触发了，而且当用户离开列表页，转而又进入列表页的时候，列表页应该是初始化状态而不是缓存状态等情况，这些都使得业务逻辑代码变得繁杂。

为了解决以上的问题，我们采用Vue提供的​​include​​方式来替代if判断

"keepPages">
        <router-view></router-view>

并且结合Vuex来管理状态

computed: 
    keepPages() 
      return this.$store.getters.getKeepPages

mutation代码：

changeKeepPages(state, status) 
    state.keepPages = status;
  ,
  keepThisPage(state, status) 
    const arr = state.keepPages.split(",");
    arr.push(status);
    state.keepPages = arr + "";
  ,
  removeThisPage(state, status) 
    const arr = state.keepPages.split(",");
    const index = arr.findIndex(x x === status);
    if (index > 0) 
      arr.splice(index, 1);
    
    state.keepPages = arr + "";
  

然后又写了一份mixin，混入即可将该页面/组件设置为缓存状态：

export default 
  created() 
    if (!this.$options.name)  // 这里的name是页面/组件对象中的name，不是路由的
      console.warn("缓存页面失败！没有设置组件名！");
    
    this.$store.commit("keepThisPage", this.$options.name);
  ,
  beforeDestroy() 
    console.log("触发组件销毁")
  
;

销毁页面可以主动使用：

this.$store.commit(removeKeepPages, xxx) // xxx为要销毁的页面名称

也可以清空所有缓存的页面，比如在用户回到首页的时候触发：

this.$store.commit(changeKeepPages, index) // index这个地方没有实际意义，经测试include为空值时所有页面都会缓存，所以这里才设置了一个不存在的。

我这里使用了下面的方式，在回到首页时顺利触发了前一个列表页的销毁事件，这样整个流程就变得十分舒适了，也在一定程度上避免了内存泄漏。以上就是Vue中keepAlive的实用技巧，希望对你有所帮助。