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动态增减控件的一些想法和小插件
Aug 01 Javascript
使用javascript实现ListBox左右全选,单选,多选,全请
Nov 07 Javascript
JSON格式化输出
Nov 10 Javascript
JS中setTimeout的巧妙用法前端函数节流
Mar 24 Javascript
jQuery中的each()详细介绍(推荐)
May 25 Javascript
ThinkJS中如何使用MongoDB的CURD操作
Dec 13 Javascript
BootStrap selectpicker后台动态绑定数据的方法
Jul 28 Javascript
基于Vue实例对象的数据选项
Aug 09 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 Javascript
vue中eslintrc.js配置最详细介绍
Dec 21 Javascript
解决vue watch数据的方法被调用了两次的问题
Nov 07 Javascript
低门槛开发iOS、Android、小程序应用的前端框架详解
Oct 16 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
PHP XML和数组互相转换详解
2016/10/26 PHP
Yii框架创建cronjob定时任务的方法分析
2017/05/23 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
PHP回调函数与匿名函数实例详解
2017/08/16 PHP
PHP count()函数讲解
2019/02/03 PHP
Gird事件机制初级读本
2007/03/10 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
2012/11/20 Javascript
node.js中的fs.unlinkSync方法使用说明
2014/12/15 Javascript
jQuery中queue()方法用法实例
2014/12/29 Javascript
jQuery+Ajax实现无刷新分页
2015/10/30 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
2020/11/17 Javascript
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
跟老齐学Python之复习if语句
2014/10/02 Python
用Python中的wxPython实现最基本的浏览器功能
2015/04/14 Python
python实现决策树C4.5算法详解(在ID3基础上改进)
2017/05/31 Python
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
Python时间戳使用和相互转换详解
2017/12/11 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
详解windows python3.7安装numpy问题的解决方法
2018/08/13 Python
python监测当前联网状态并连接的实例
2018/12/18 Python
Python中logging实例讲解
2019/01/17 Python
只需7行Python代码玩转微信自动聊天
2019/01/27 Python
基于Python获取城市近7天天气预报
2019/11/26 Python
Python中断多重循环的几种方式详解
2020/02/10 Python
Python3标准库之functools管理函数的工具详解
2020/02/27 Python
Django实现简单的分页功能
2021/02/22 Python
推荐10个HTML5响应式框架
2016/02/25 HTML / CSS
儿子婚宴答谢词
2014/01/09 职场文书
村庄绿化方案
2014/05/07 职场文书
考生诚信考试承诺书
2014/05/23 职场文书
运动会跳远广播稿5篇
2014/09/17 职场文书
小学生暑假安全公约
2015/07/14 职场文书
中学总务处工作总结
2015/08/12 职场文书
建立共青团委员会的请示
2019/04/02 职场文书
Go语言特点及基本数据类型使用详解
2022/03/21 Golang