详解关于Vue2.0路由开启keep-alive时需要注意的地方


Posted in Javascript onSeptember 18, 2018

Vue2.0 做应用必有的需求就是页面数据需要做缓存,不用每次进入页面都要把数据重新请求一遍,每次页面切换都有段等待数据相应时间,这个用户体验可想有多么蛋疼,所以页面缓存是必要的,啥时候需要更新页面数据呢?可以监听状态变化,或者是手动下拉刷新重新请求数据,酱紫,我想用户体验会做的更好。

keep-alive的作用以及好处

在做电商有关的项目中,当我们第一次进入列表页需要请求一下数据,当我从列表页进入详情页,详情页不缓存也需要请求下数据,然后返回列表页,这时候我们使用keep-alive来缓存组件,防止二次渲染,这样会大大的节省性能。

废话不多说直接上码,一般是在 src/App.vue 设置开启 keep-alive 实现页面数据缓存:

<template>
 <keep-alive>
  <router-view></router-view>
 </keep-alive>
</template>

列举几个常用的 hook 方法,如下:

export default {
 data() {
  return {
  
  }
 },
 created: function() {
  console.log("the hook of created is done!");
 },
 mounted: function() {
  console.log("the hook of mounted is done!");
 },
 activated: function() {
  console.log("the hook of activated is done!");
 },
 deactivated: function() {
  console.log("the hook of deactivated is done!");
 }
}

首次进来 hook 的触发顺序 created-> mounted-> activated,退出时触发 deactivated:

// 控制台打印结果
the hook of created is done!
the hook of mounted is done!
the hook of activated is done!
the hook of deactivated is done!

二次进来 hook 只触发 activated,退出时触发 deactivated:

// 控制台打印结果
the hook of activated is done!
the hook of deactivated is done!

所以这就是为什么有些人开启 keep-alive 之后,created 和 mounted 注册的 pageInt 方法不触发的原因了,因为 keep-alive 把它们屏蔽了,也就是把数据缓存起来,所以不再请求。

如果你的某些页面一定要实时请求,你可以直接在 activated 这个 hook 做 pageInt,就不要在 created 和 mounted 上面注册 pageInt 方法了。

还有你可以选择性 pageInt,比如监听状态变化,包括但不限于监听路由的变化,某参数的变化,某时间节点的变化等等。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript一点特殊用法
May 28 Javascript
动态的绑定事件addEventListener方法的使用
Jan 24 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
Jun 16 Javascript
javascript实现汉字转拼音代码分享
Apr 20 Javascript
JavaScript仿商城实现图片广告轮播实例代码
Feb 06 Javascript
jQuery解决$符号命名冲突
Jun 18 Javascript
AngularJS基础 ng-list 指令详解及示例代码
Aug 02 Javascript
解决node.js安装包失败的几种方法
Sep 02 Javascript
详解微信小程序开发之城市选择器 城市切换
Jan 17 Javascript
基于 webpack2 实现的多入口项目脚手架详解
Jun 26 Javascript
react-native 圆弧拖动进度条实现的示例代码
Apr 12 Javascript
React 组件渲染和更新的实现代码示例
Feb 21 Javascript
Vue中 key keep-alive的实现原理
Sep 18 #Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
Sep 18 #Javascript
从Vuex中取出数组赋值给新的数组,新数组push时报错的解决方法
Sep 18 #Javascript
vue服务端渲染添加缓存的方法
Sep 18 #Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
Sep 18 #Javascript
微信小程序开发之路由切换页面重定向问题
Sep 18 #Javascript
在小程序中使用canvas的方法示例
Sep 17 #Javascript
You might like
PHP set_time_limit(0)长连接的实现分析
2010/03/02 PHP
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
2015/07/31 PHP
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
jQuery 事件队列调整方法
2009/09/18 Javascript
Jquery网页出现的乱码问题的三种解决方法
2013/06/30 Javascript
简单的JavaScript互斥锁分享
2014/02/02 Javascript
jquery的ajax异步请求接收返回json数据实例
2014/06/16 Javascript
jQuery+css3实现文字跟随鼠标的上下抖动
2015/07/31 Javascript
js实现移动端编辑添加地址【模仿京东】
2017/04/28 Javascript
Node.js安装配置图文教程
2017/05/10 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
2017/05/11 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
2019/02/25 Javascript
Vue组件通信的几种实现方法
2019/04/25 Javascript
微信小程序实现页面浮动导航
2020/01/08 Javascript
js中实现继承的五种方法
2021/01/25 Javascript
Python贪吃蛇游戏编写代码
2020/10/26 Python
python抽取指定url页面的title方法
2018/05/11 Python
python中sys.argv函数精简概括
2018/07/08 Python
Python延时操作实现方法示例
2018/08/14 Python
python进行TCP端口扫描的实现
2018/12/21 Python
Python closure闭包解释及其注意点详解
2019/08/28 Python
python3 tcp的粘包现象和解决办法解析
2019/12/09 Python
pycharm激活码有效到2020年11月底
2020/09/18 Python
Python转换字典成为对象,可以用&quot;.&quot;方式访问对象属性实例
2020/05/11 Python
Python基于BeautifulSoup爬取京东商品信息
2020/06/01 Python
英国内衣连锁店:Boux Avenue
2018/01/24 全球购物
Sneaker Studio法国:购买运动鞋
2018/06/08 全球购物
莫斯科购买书籍网站:Book24
2020/01/12 全球购物
linux面试题参考答案(1)
2016/01/22 面试题
大型晚会策划方案
2014/02/06 职场文书
品质口号大全
2014/06/17 职场文书
2014年教育教学工作总结
2014/11/13 职场文书
公司副总经理岗位职责
2015/04/08 职场文书
三方合作意向书范本
2015/05/09 职场文书