vue keep-alive总结，使用keep-alive缓存页面，返回时刷新部分数据示例。

2023-12-10 13:40:39

官方说明

<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。

当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

用途

主要用于保留组件状态或避免重新渲染。

生命周期函数

activated

在 keep-alive 组件激活时调用
该钩子函数在服务器端渲染期间不被调用

disactivated

在 keep-alive 组件停用时调用
该钩子在服务器端渲染期间不被调用

生命周期执行顺序：

　　1、不使用keep-alive的：beforeRouteEnter --> created --> mounted --> destroyed
　　2、使用keep-alive的：beforeRouteEnter --> created --> mounted --> activated --> deactivated
　　3、使用keep-alive，再次进入了缓存页面：beforeRouteEnter -->activated --> deactivated

使用总结

基本用法

<!-- 基本 -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>

<!-- 多个条件判断的子组件 -->
<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>

<!-- 和 `<transition>` 一起使用 -->
<transition>
  <keep-alive>
    <component :is="view"></component>
  </keep-alive>
</transition>

根据条件缓存

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="[‘a‘, ‘b‘]">
  <component :is="view"></component>
</keep-alive>

个人最常使用：结合router缓存部分页面

1.app.vue

<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>

2.router目录index.js

export default new Router({
  routes: [
    { path:‘*‘, component: (resolve) => require([‘../components/main/login.vue‘], resolve) },

{

path: ‘/inspectList‘,

name: ‘inspectList‘,

component: inspectList,

meta: {

keepAlive: true, // 判断是否需要缓存

}

    { 
      path: ‘/monitorMenu‘,
      name: ‘monitorMenu‘, 
      component: monitorMenu ,
      meta: {
       keepAlive: true, // 判断是否需要缓存
      }
    },
  ]
})

使用keep-alive缓存页面，返回时刷新部分数据示例

通过上面已经知道了被keep-alive包裹的页面会被缓存。同时知道生命周期执行顺序：

使用keep-alive的：beforeRouteEnter --> created --> mounted --> activated --> deactivated
使用keep-alive，再次进入了缓存页面：beforeRouteEnter -->activated --> deactivated。

所以只需要使用keep-alive结合router缓存需要缓存的页面，然后把需要刷新的数据放在页面的activated 钩子函数中。

 activated(){
    //需要刷新的页面方法
     this.getSubsideList();
  },