vue缓存keepAlive

vue缓存

keep-alive本质作用是缓存组件

路由缓存

全部缓存
复制代码
    <keep-alive>
      <router-view></router-view>
    </keep-alive>

app.vue根组件

复制代码
<template>
  <div id="app">
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

路由

复制代码
  {
    path: '/first',
    name: 'first',
    component: () => import('../views/alive.vue/first.vue')
  },
  {
    path: '/second',
    name: 'second',
    component: () => import('../views/alive.vue/second.vue')
  },
  {
    path: '/third',
    name: 'third',
    component: () => import('../views/alive.vue/third.vue')
  }

first.vue组件

复制代码
<template>
  <div class="first">
    <h1 class="title">第一个组件</h1>
    <button @click="toSecond">跳到第二个组件</button>
  </div>
</template>
<script>
export default {
  name: 'first',
  methods: {
    toSecond() {
      document.querySelector('.title').style.color = 'red'
      this.$router.push('/second')
    }
  }
}
</script>

second.vue组件

复制代码
<template>
  <div class="second">
    <h1>第二个组件</h1>
    <button @click="toThird">跳到第三个组件</button>
  </div>
</template>
<script>
export default {
  name: 'second',
  created() {
    console.log('second created')
  },
  methods: {
    toThird() {
      document.querySelector('.second').style.backgroundColor = 'green'
      this.$router.push('/third')
    }
  }
}
</script>

third.vue组件

复制代码
<template>
  <div class="third">
    <h1>第三个组件</h1>
  </div>
</template>

如果我点击第一页的按钮,进入second页面,点击第二页的按钮,进入第三个页面;

然后返回second,第二个组件second.vue的背景色是绿色的

再返回first,第一个组件title的文字是红色的

所有的组件都被缓存了

部分(多个或一个)缓存

修改app.vue跟组件

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

修改路由,需要缓存的路由添加meta属性,且是否缓存keepAlive键的值设置为true

复制代码
  {
    path: '/first',
    name: 'first',
    component: () => import('../views/alive.vue/first.vue'),
    meta: { keepAlive: true }
  },
  {
    path: '/second',
    name: 'second',
    component: () => import('../views/alive.vue/second.vue')
  },
  {
    path: '/third',
    name: 'third',
    component: () => import('../views/alive.vue/third.vue'),
    meta: { keepAlive: false }
  }

这样和上面一样点击跳转,再返回 first=》second=》third=》second=》first

返回的时候就只有第一个页面的字体是红色的,有缓存;第二个页面的背景是白色,没缓存

缓存单个路由

再keep-alive标签内设置inlude属性,属性值为需要被缓存的路由名称

复制代码
    <keep-alive include="second">
      <router-view></router-view>
    </keep-alive>

组件缓存

直接再需要被缓存的组件外加一层keep-alive标签

复制代码
    <keep-alive include="second">
      <test></test>
    </keep-alive>

属性

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

使用keep-alive的时候也要考虑下性能,不能缓存太多的东西

生命周期

vue默认有8个生命钩子函数,但是如用了 keep-alive 的时候,activated与deactivated这了两个钩子函数也生效

钩子函数 调用实际 说明
activated keep-alive 缓存的组件激活时调用
deactivated 被 keep-alive 缓存的组件失活时调用

第一次进入页面:beforeCreate=>created=>beforeMount=>mounted=>activated

离开:deactivated

再次进入:activated

原理

LRU算法:一种缓存淘汰策略(Least Recently Used);LRU判定最近使用过的数据为有用的,很久都没用过的数据是无用的,在内存满了就优先删除很久未使用,也就是无用的数据。

①接收一个capacity的参数作为缓存的最大容量

②实现put(key,value)方法存入键值对

③实现get(key)方法获取key对应的value,若不存在返回-1

具体的逻辑:

1》keep-alive在内部维护了一个key的数组和一个缓存对象,keys数组记录目前缓存的组件key值,cache对象会以key值为键,值为vnode

2》在render函数中,(针对使用keep-alive的组件)会与exclude/include黑白名单匹配,如果能匹配则继续往下执行,不能匹配(不在白名单中,或在黑名单中)则冲新生成虚拟dom

3》如果缓存过组件,则直接取出缓存,并更新组件的key在key数组中的位置;

4》如果没有缓存则在keys数组和cache对象保存此组件,并检查数量是否超过max,超过则根据LRU算法进行删除

动态缓存的实现思路

首页(A)、列表页(B)、详情页(C),一般可以从:A->B->C;

要求动态缓存B页面:C->B时保持缓存,A->B时放弃缓存

实现:

定义一个全局的缓存数组,通过keep-alive的include属性传入全局数组,或在路由的meta中通过keepAlive属性判断是否缓存

路由钩子中需修改缓存状态,beforeEach和beforeRouteLeave修改页面是否被缓存

相关推荐
三翼鸟数字化技术团队1 小时前
Vue自定义指令最佳实践教程
前端·vue.js
Spark2382 小时前
关于vue3整合tiptap的slash菜单的ts支持
vue.js
随笔记2 小时前
Flex布局下,label标签设置宽度依旧对不齐,完美解决(flex-shrink属性)
javascript·css·vue.js
樊小肆2 小时前
实战!从 0 到 1 搭建 H5 AI 对话页面
前端·vue.js
JiangJiang2 小时前
揭秘Vue3源码之computed:懒计算与缓存机制全解析
前端·vue.js·面试
清灵xmf2 小时前
Vue 3 自定义权限指令 v-action
前端·javascript·vue.js·自定义指令
web_Hsir2 小时前
Uniapp 实现微信小程序滑动面板功能详解
vue.js·微信小程序·uni-app
松韬3 小时前
Spring + Redisson:从 0 到 1 搭建高可用分布式缓存系统
java·redis·分布式·spring·缓存
·云扬·3 小时前
深度剖析 MySQL 与 Redis 缓存一致性:理论、方案与实战
redis·mysql·缓存
汤姆大聪明4 小时前
Redisson 操作 Redis Stream 消息队列详解及实战案例
redis·spring·缓存·maven