vue缓存之keep-alive的理解和应用详解


Posted in Javascript onNovember 02, 2020

官方解释:

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

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

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

keep-alive 是 Vue 的内置组件,在组件切换过程中将状态保留在内存中,等再次访问的时候,还保持着离开之前的所有状态,而不是重新初始化。也就是所谓的组件缓存。

我们知道,使用路由vue-router切换组件的时候是不保存状态的,它进行router.push()或router.push()或router.replace()的时候,旧组件会被销毁,新组件会被新建,然后走一遍完整的生命周期。所以缓存经常与router-view一起出现:

<keep-alive>
  <router-view /> <!-- 所有路径匹配到的视图组件都会被缓存 -->
</keep-alive>

被包含在 keep-alive 中创建的组件,会多出两个生命周期的钩子: activated 与 deactivated:

1. activated:在 keep-alive 组件激活时调用
2. deactivated:在 keep-alive 组件停用时调用

注意: 只有组件被 keep-alive 包裹时,这两个生命周期函数才会被调用。这两个钩子在服务器端渲染期间不被调用。

应用场景:

官网有一个多标签界面的例子,介绍的还是蛮详细的。

我们在实际开发项目中会有一些需求,比如跳转到详情页面时,需要保持列表页的滚动条的位置,返回的时候依然在这个位置,这样可以提高用户体验,这个时候就可以使用缓存组件 keep-alive 来解决。

设置了 keep-alive 缓存的组件,会多出两个生命周期钩子:

  • 首次进入组件时:beforeRouteEnter > beforeCreate > created > mounted > activated > ... ... > beforeRouteLeave > deactivated
  • 再次进入组件时:beforeRouteEnter > activated > ... ... > beforeRouteLeave > deactivated

可以看到,缓存的组件中 activated 钩子函数每次都会触发,所以可以通过这个钩子判断,当前组件时需要使用缓存的数据还是重新调用接口加载数据。如果未使用keep-alive 组件,则在页面回退时会重新渲染页面,首次进入组件的一系列生命周期也会一一被触发。

离开组件时,使用了 keep-alive 不会调用 beforeDestroy 和 destroyed 钩子,因为组件没被销毁,被缓存起来了。所以 deactivated 这个钩子可以看作是 beforeDestroy 和 destroyed 的代替,缓存组件销毁的时候要做的一些操作可以放在这个里面。

需求案例

最近项目中碰到需要缓存的场景,主要还是列表页到详情页的跳转,但列表页存在多级关系,具体需求如下:

vue缓存之keep-alive的理解和应用详解

初次进入此页面,默认展示左侧的树形结构菜单,点击某一菜单,右侧加载该菜单相应的数据列表,由列表进入详情内页,然后再返回该页面,希望该页面保留了用户之前选择的树形菜单及数据列表。若从其他页面进入此页面,则不需要缓存。

案例实践

思路:结合 router 中设置 meta 信息,缓存列表页。
1. 设置路由的 meta 信息

const List = () => import(/* webpackChunkName: "list" */ '../pages/List.vue')
const Detail = () => import(/* webpackChunkName: "detail" */ '../pages/Detail.vue')
{
  path: 'list',
  name: 'list',
  component: List,
  meta: {
    title: '列表',
    keepAlive: true, //需要缓存
    isKeep: false
  }
},
{
  path: 'dist',
  name: 'detail',
  component: Detail
}

2. 修改渲染匹配视图组件 router-view(一般是 app.vue 文件,根据实际需求会不一样)

<div class="container">
  <keep-alive> 
    <!-- 需要缓存的视图组件 -->
    <router-view v-if="$route.meta.keepAlive"></router-view> 
   </keep-alive>
   <!-- 不需要缓存的视图组件 -->
   <router-view v-if="!$route.meta.keepAlive"></router-view>
</div>

也可以使用 keep-alive 组件的 include/exclude 属性,include 表示要缓存的组件名(定义时的 name 属性),而 exclude 相反,匹配到的组件不会被缓存。

<div class="container">
  <keep-alive include="list">
    <router-view></router-view> 
   </keep-alive>
</div>

3. 在需要缓存的页面中,通过导航守卫 beforeRouteEnter 和 activated 钩子判断使用缓存还是重新渲染

beforeRouteEnter (to, from, next) {
  // 只在详情返回时做缓存
  if (from.name === 'detail') {
    to.meta.isKeep = true
  } else {
    to.meta.isKeep = false
  }
  next()
},
activated () {
  if(this.$route.meta.isKeep) {
    // 详情返回,取缓存数据
  } else {
    // 重新渲染,在这里调用加载请求
  }
}

此处 beforeRouteEnter 钩子也可以使用 watch 属性监听路由的变化:

watch: {
  $route(to, from) {
    //通过to/from.path判断是否是需要缓存的路径然后添加逻辑
  }
}

问题:

从详情返回列表时正常,但当用户在详情页按 F5 刷新之后,再返回列表就不能保留离开之前的状态了,因为这时页面重载了。

解决办法:

在离开当前之前,将信息储存在 localStorage 中,当详情数据刷新后,手动触发加载请求。

到此这篇关于vue缓存之keep-alive的理解和应用详解的文章就介绍到这了,更多相关vue keep-alive内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
基于JQUERY的多级联动代码
Jan 24 Javascript
javascript校验价格合法性实例(必须输入2位小数)
May 05 Javascript
jQuery实现返回顶部功能适合不支持js的浏览器
Aug 19 Javascript
JavaScript中的console.group()函数详细介绍
Dec 29 Javascript
javascript实现表格排序 编辑 拖拽 缩放
Jan 02 Javascript
javascript无刷新评论实现方法
May 13 Javascript
Javascript基础教程之比较null和undefined值
May 16 Javascript
js获取html的span标签的值方法(超简单)
Jul 26 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
Oct 12 Javascript
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
微信小程序实现搜索功能
Mar 10 Javascript
JS脚本实现定时到网站上签到/签退功能
Apr 22 Javascript
详解vue-router的导航钩子(导航守卫)
Nov 02 #Javascript
vue+elementUI中表格高亮或字体颜色改变操作
Nov 02 #Javascript
vue element-ui中table合计指定列求和实例
Nov 02 #Javascript
vue 动态添加class,三个以上的条件做判断方式
Nov 02 #Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
Nov 02 #Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
Nov 02 #Javascript
Vant picker 多级联动操作
Nov 02 #Javascript
You might like
Drupal7 form表单二次开发要点与实例
2014/03/02 PHP
php  PATH_SEPARATOR判断当前服务器系统类型实例
2016/10/28 PHP
PHP实现的XML操作类【XML Library】
2016/12/29 PHP
Laravel学习教程之本地化模块
2017/08/18 PHP
jQuery中closest和parents的区别分析
2015/05/07 Javascript
js限制文本框的输入内容代码分享(3类)
2015/08/20 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
2015/10/25 Javascript
javascript动态添加checkbox复选框的方法
2015/12/23 Javascript
JS获得一个对象的所有属性和方法实例
2017/02/21 Javascript
angular2实现统一的http请求头方法
2018/08/13 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
2019/09/11 Javascript
vue2.x数组劫持原理的实现
2020/04/19 Javascript
9种python web 程序的部署方式小结
2014/06/30 Python
Python中的各种装饰器详解
2015/04/11 Python
Python二分法搜索算法实例分析
2015/05/11 Python
python 简单的绘图工具turtle使用详解
2017/06/21 Python
python 多个参数不为空校验方法
2019/02/14 Python
python自定义时钟类、定时任务类
2021/02/22 Python
Django框架模板用法入门教程
2019/11/04 Python
python文件处理fileinput使用方法详解
2020/01/02 Python
Python将QQ聊天记录生成词云的示例代码
2021/02/10 Python
浅谈CSS3 box-sizing 属性 有趣的盒模型
2019/04/02 HTML / CSS
英国性能汽车零件和发动机配件在线:Maxpeedingrods
2019/11/05 全球购物
.NET remoting中对象激活的两种方式
2015/06/08 面试题
战友聚会邀请函
2014/01/18 职场文书
研究生简历自我评价范文
2014/09/13 职场文书
幼儿教师2014年度工作总结
2014/12/16 职场文书
平安建设汇报材料
2014/12/29 职场文书
2015国庆66周年宣传语
2015/07/14 职场文书
新闻稿标题
2015/07/18 职场文书
2015年挂职锻炼个人总结
2015/10/22 职场文书
求职自我评价参考范文
2019/05/16 职场文书
Go语言切片前或中间插入项与内置copy()函数详解
2021/04/27 Golang
每日六道java新手入门面试题,通往自由的道路
2021/06/30 Java/Android
如何避免mysql启动时错误及sock文件作用分析
2022/01/22 MySQL
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/06 PostgreSQL