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将文本转化成JSON对象需要注意的问题
May 09 Javascript
JavaScript 用cloneNode方法克隆节点的代码
Oct 15 Javascript
通过jQuery源码学习javascript(一)
Dec 27 Javascript
jquery高效反选具体实现
May 05 Javascript
jquery自定义类似$.ajax()的方法实现代码
Aug 13 Javascript
js流动式效果显示当前系统时间
May 16 Javascript
基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转
Jun 12 Javascript
JS继承与闭包及JS实现继承的三种方式
Oct 15 Javascript
Vue的轮播图组件实现方法
Mar 03 Javascript
详解Puppeteer 入门教程
May 09 Javascript
JS实现数组删除指定元素功能示例
Jun 05 Javascript
Vue 3.0中jsx语法的使用
Nov 13 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新手NOTICE错误常见解决方法
2011/12/07 PHP
PHP中ini_set和ini_get函数的用法小结
2014/02/18 PHP
php模拟用户自动在qq空间发表文章的方法
2015/01/07 PHP
php简单实现单态设计模式的方法分析
2017/07/28 PHP
PHP+MySQL高并发加锁事务处理问题解决方法
2018/04/30 PHP
PHP自动识别当前使用移动终端
2018/05/21 PHP
基于Jquery的动态添加控件并取值的实现代码
2010/09/24 Javascript
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
js判断undefined变量类型使用typeof
2013/06/03 Javascript
node.js中的http.get方法使用说明
2014/12/14 Javascript
laypage分页控件使用实例详解
2016/05/19 Javascript
Angular2表单自定义验证器的实现
2016/10/19 Javascript
bootstrap table配置参数例子
2017/01/05 Javascript
Bootstrap笔记之缩略图、警告框实例详解
2017/03/09 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
2017/04/12 Javascript
使用JS编写的随机抽取号码的小程序
2017/08/11 Javascript
关于单文件组件.vue的使用
2018/09/20 Javascript
javascript实现倒计时关闭广告
2021/02/09 Javascript
[03:55]2014DOTA2国际邀请赛 Fnatic经理采访赢DK在情理之中
2014/07/10 DOTA
Python中unittest用法实例
2014/09/25 Python
Python Tkinter实现简易计算器功能
2018/01/30 Python
Python 实现网页自动截图的示例讲解
2018/05/17 Python
利用Python自动化操作AutoCAD的实现
2020/04/01 Python
Python操作word文档插入图片和表格的实例演示
2020/10/25 Python
python+opencv实现车道线检测
2021/02/19 Python
css3中transition属性详解
2014/09/02 HTML / CSS
你的自行车健身专家:FaFit24
2016/11/16 全球购物
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
环境科学专业个人求职信
2013/12/15 职场文书
英语专业求职信
2014/07/08 职场文书
巾帼志愿者活动方案
2014/08/17 职场文书
班子群众路线教育实践个人对照检查材料思想汇报
2014/09/30 职场文书
主持人开幕词
2015/01/29 职场文书
基于go interface{}==nil 的几种坑及原理分析
2021/04/24 Golang
golang DNS服务器的简单实现操作
2021/04/30 Golang
单机多实例部署 MySQL8.0.20
2022/05/15 MySQL