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 相关文章推荐
Javascript执行效率全面总结
Nov 04 Javascript
javascript深拷贝(deepClone)详解
Aug 24 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
Dec 21 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
Mar 09 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
May 23 Javascript
微信小程序用户自定义模版用法实例分析
Nov 28 Javascript
利用ES6实现单例模式及其应用详解
Dec 09 Javascript
利用angular、react和vue实现相同的面试题组件
Feb 19 Javascript
js经验分享 JavaScript反调试技巧
Mar 10 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
Apr 02 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
May 08 Javascript
基于JavaScript实现大文件上传后端代码实例
Aug 18 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 allow_url_include的应用和解释
2010/04/22 PHP
Thinkphp无限级分类代码
2015/11/11 PHP
PHP文件上传小程序 适合初学者学习!
2019/05/23 PHP
javascript 限制输入和粘贴(IE,firefox测试通过)
2008/11/14 Javascript
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
js选取多个或单个元素的实现代码(用class)
2012/08/22 Javascript
Extjs Gird 支持中文拼音排序实现代码
2013/04/15 Javascript
浅析XMLHttpRequest的缓存问题
2013/12/13 Javascript
纯js模拟div层弹性运动的方法
2015/07/27 Javascript
javascript动态获取登录时间和在线时长
2016/02/25 Javascript
javascript经典特效分享 手风琴、轮播图、图片滑动
2016/09/14 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
2017/02/14 Javascript
原生js简单实现放大镜特效
2017/05/16 Javascript
React 子组件向父组件传值的方法
2017/07/24 Javascript
express框架实现基于Websocket建立的简易聊天室
2017/08/10 Javascript
[01:18:31]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第一场 1月10日
2021/03/11 DOTA
Python中操作mysql的pymysql模块详解
2016/09/13 Python
Anaconda2 5.2.0安装使用图文教程
2018/09/19 Python
Python实现的序列化和反序列化二叉树算法示例
2019/03/02 Python
详解PyCharm安装MicroPython插件的教程
2019/06/24 Python
python安装本地whl的实例步骤
2019/10/12 Python
使用pytorch和torchtext进行文本分类的实例
2020/01/08 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
利用python实现凯撒密码加解密功能
2020/03/31 Python
CSS3制作气泡对话框的实例教程
2016/05/10 HTML / CSS
美国最大网上鞋店:Zappos
2016/07/25 全球购物
马来西亚网上购物:Youbeli
2018/03/30 全球购物
SteelSeries赛睿官网:游戏外设和配件的领先制造商(耳机、键盘、鼠标和鼠标垫)
2018/06/17 全球购物
阿里巴巴英国:Alibaba英国
2019/12/11 全球购物
阿联酋最好的手机、电子产品和家用电器网上商店:Eros Digital Home
2020/08/09 全球购物
上班迟到检讨书
2014/01/10 职场文书
期末自我鉴定
2014/01/23 职场文书
暑期社会实践感言
2014/02/25 职场文书
销售行政专员岗位职责
2014/06/10 职场文书
安全生产月标语
2014/10/07 职场文书
春季运动会加油词
2015/07/18 职场文书