vue中的keep-alive缓存组件

问题

我们知道一个组件的生命周期是从创建到销毁的这个过程,当从一个页面跳转到另一个页面的时候,其实组件已经经历了一个生命周期

在浏览器被打开的时候是一个创建的过程,跳转到另一个页面又经历了销毁的过程,所以当我们从A页面跳转到B页面的时候,A页面已经被销毁了,假如在跳转之前我们对A页面进行了一个操作,接着我们从B页面再返回到A页面,发现原先在A页面上的操作没有了,但是假如我们想保存A页面原来的操作,我们应该怎么做呢?
可以利用vue的Keep-alive缓存组件

Keep-alive

使用keep-alive包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们,避免组件被返回后浏览器对它进行再度渲染,当组件在 内被切换,它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

activated 和 deactivated

activated :该生命周期钩子会在组件被重新激活时调用
deactivated
:该声明周期钩子会在组件被停用的时候调用
使用keep-alive会将数据保存在内存中,如果要每次进入页面时得到最新的数据,就要在activated里面重新请求获取数据,承担原来在created钩子和mounted钩子里获取数据的职责

Props:

include - 字符串或正则表达式。只有名称匹配的组件会被缓存。

exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。

max - 数字。最多可以缓存多少组件实例

keep-alive中只能有一个根节点

使用方法

//第一种:直接在组件外面套keep-alive 组件A和组件B内容都会被缓存
    <keep-alive>
      <component :is="flag"></component>
    </keep-alive>
 
//第二种:include 此时只有组件A内容会被缓存 若有多个可用逗号分隔include="testA,testB"
      <keep-alive include="testA">
         <component :is="flag"></component> 
      </keep-alive>
 
//第三种:include+正则表达式或者数组 这种情况必须用v-bind (:include="")
      <keep-alive :include="['testA']">
         <component :is="flag"></component>
      </keep-alive> 
 
//第四种:exclude 此时组件A内容不会被缓存,组件B内容会被缓存
      <keep-alive exclude="testA">
         <component :is="flag"></component>
      </keep-alive> 
 
 
//特殊情况:若include和exclude同时出现 exclude的优先级是高于include的此时只缓存组件B
      <keep-alive include="testA,testB" exclude="testA">
         <component :is="flag"></component>
      </keep-alive> 

结合Router使用

在router中为路由添加一个meta属性,设置 keepAlive:false/true

{
    path: '/tab',
    name: 'tab',
    meta:{
      keepAlive:true   //需要缓存
    },
    component: () => import('../views/Tab.vue')
  },
  {
    path: '/banner',
    name: 'banner',
    meta:{
      keepAlive:false   //不需要缓存
    },
    component: () => import('../views/Banner.vue')
  }

然后在App.vue中使用keep-alive包裹使用路由显示的入口**()**

    //此处是为添加了keepAlive=true 的路由添加缓存
    //会缓存路由出口的所有页面
     <keep-alive>
      <router-view> <router-view/>   
     </keep-alive>
     
    //此处是为添加了keepAlive=true 的路由添加缓存
     <keep-alive>
        <router-view v-if="$route.meta.keepAlive"/>   
     </keep-alive>
 
    //此处是为添加了keepAlive=false 的路由默认不缓存
       <keep-alive>
      <router-view v-if="!$route.meta.keepAlive"/>   
       </keep-alive>

使用场景

  1. 多级路由切换:当你在应用程序中设置了多层嵌套路由,用户频繁地在不同层级之间切换时,keep-alive可以显著提高性能。因为它避免了在用户返回上一层路由时重新加载整个组件树的过程,减少了资源消耗和等待时间,提升了用户体验。
  2. 复杂组件或大型应用:对于含有大量计算、数据绑定、DOM操作或依赖于特定环境状态的组件,重新构建和渲染可能导致性能下降。keep-alive通过缓存这些组件实例,减少不必要的重新初始化过程,提高了应用的整体性能。
  3. 用户界面需要保留状态:在需要维持组件间状态一致性的情况下,比如聊天应用中历史消息的滚动查看,或者表单填写等场景,使用 keep-alive可以保证用户离开页面后再回来仍能接收到其输入的内容,而不需要重新填充初始状态。
  4. 移动设备访问:移动网络环境通常较慢,频繁加载页面会导致更高的流量消耗和更长的响应时间。通过利用 keep-alive缓存组件,可以在一定程度上减轻对移动设备的网络负担,提升移动端应用的流畅度。
  5. 高频率操作界面:在一些操作需要快速响应的界面设计中,如日历选择、搜索结果页等,频繁的切换操作可以借助 keep-alive 提升界面切换速度,提供更好的用户体验
  6. 分页浏览:在数据密集型的应用中,如列表页面分页展示数据,用户频繁点击下一页或上一页时,使用 keep-alive可以避免重复加载数据,仅更新当前视图的部分内容。
相关推荐
苏-言13 分钟前
Spring IOC实战指南:从零到一的构建过程
java·数据库·spring
yqcoder28 分钟前
Vue3 + Vite + Electron + TS 项目构建
前端·javascript·vue.js
菠萝咕噜肉i33 分钟前
超详细:Redis分布式锁
数据库·redis·分布式·缓存·分布式锁
草莓base34 分钟前
【手写一个spring】spring源码的简单实现--容器启动
java·后端·spring
ggdpzhk3 小时前
VUE:基于MVVN的前端js框架
前端·javascript·vue.js
只因在人海中多看了你一眼4 小时前
分布式缓存 + 数据存储 + 消息队列知识体系
分布式·缓存
Dlwyz5 小时前
redis-击穿、穿透、雪崩
数据库·redis·缓存
冰帝海岸7 小时前
01-spring security认证笔记
java·笔记·spring
活宝小娜7 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点7 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript