详解关于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 工具库 Cloudgamer JavaScript Library v0.1 发布
Oct 29 Javascript
js动态添加事件并可传参数示例代码
Oct 21 Javascript
js实现鼠标触发图片抖动效果的方法
Feb 27 Javascript
实现placeholder效果的方案汇总
Jun 11 Javascript
12个超实用的JQuery代码片段
Nov 02 Javascript
纯js和css完成贪吃蛇小游戏demo
Sep 01 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
Oct 01 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
Feb 24 Javascript
用node开发并发布一个cli工具的方法步骤
Jan 03 Javascript
微信小程序之滑动页面隐藏和显示组件功能的实现代码
Jun 19 Javascript
react-native 实现购物车滑动删除效果的示例代码
Jan 15 Javascript
vue elementUI表格控制对应列
Apr 13 Vue.js
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数字格式化
2006/12/06 PHP
解析PHP将对象转换成数组的方法(兼容多维数组类型)
2013/06/21 PHP
解析PHP中DIRECTORY_SEPARATOR,PATH_SEPARATOR两个常量的作用
2013/06/21 PHP
PHP递归调用数组值并用其执行指定函数的方法
2015/04/01 PHP
php和html的区别点详细总结
2019/09/24 PHP
纯CSS打造的导航菜单(附jquery版)
2010/08/07 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
2016/01/10 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
轻松掌握JavaScript策略模式
2016/08/25 Javascript
详解JavaScript权威指南之对象
2016/09/27 Javascript
分分钟玩转Vue.js组件
2016/10/25 Javascript
移动端界面的适配
2017/01/11 Javascript
使用JQ完成表格隔行换色的简单实例
2017/08/25 Javascript
JS中touchstart事件与click事件冲突的解决方法
2018/03/12 Javascript
vue中v-model的应用及使用详解
2018/06/27 Javascript
javascript实现前端成语点击验证优化
2020/06/24 Javascript
[01:00:11]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第一场 2月7日
2021/03/11 DOTA
详解Python logging调用Logger.info方法的处理过程
2019/02/12 Python
Python中时间datetime的处理与转换用法总结
2019/02/18 Python
python 使用csv模块读写csv格式文件的示例
2020/12/02 Python
详解python中的三种命令行模块(sys.argv,argparse,click)
2020/12/15 Python
Python Selenium异常处理的实例分析
2021/02/28 Python
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
军校制空专业毕业生自我鉴定
2013/11/16 职场文书
优良学风班申请材料
2014/02/13 职场文书
《胡杨》教学反思
2014/02/16 职场文书
小学生演讲稿大全
2014/04/25 职场文书
关于建议书的格式范文
2014/05/20 职场文书
2014年司机工作总结
2014/11/21 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
高中家长意见怎么写
2015/06/03 职场文书
宾馆安全管理制度
2015/08/06 职场文书
学习计划是什么
2019/04/30 职场文书
jQuery ajax - getScript() 方法和getJSON方法
2021/05/14 jQuery
Python数据可视化之用Matplotlib绘制常用图形
2021/06/03 Python
CentOS安装Nginx并部署vue
2022/04/12 Servers