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可以避免重复加载数据,仅更新当前视图的部分内容。
相关推荐
程序员爱技术1 小时前
Vue 2 + JavaScript + vue-count-to 集成案例
前端·javascript·vue.js
cs_dn_Jie6 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic6 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿6 小时前
webWorker基本用法
前端·javascript·vue.js
Wx-bishekaifayuan7 小时前
django电商易购系统-计算机设计毕业源码61059
java·spring boot·spring·spring cloud·django·sqlite·guava
customer087 小时前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
小白冲鸭8 小时前
【报错解决】使用@SpringJunitConfig时报空指针异常
spring·java后端开发
getaxiosluo8 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v8 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
LuckyLay9 小时前
Spring学习笔记_27——@EnableLoadTimeWeaving
java·spring boot·spring