详解关于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 相关文章推荐
让网页根据不同IE版本显示不同的内容
Feb 08 Javascript
jquery实现按Enter键触发事件示例
Sep 10 Javascript
javascript事件冒泡实例分析
May 13 Javascript
js实现select下拉框菜单
Dec 08 Javascript
AngularJS中的包含详细介绍及实现示例
Jul 28 Javascript
详解angularJs指令的3种绑定策略
Apr 13 Javascript
详解JavaScript数组过滤相同元素的5种方法
May 23 Javascript
微信小程序“摇一摇”的实例代码
Jul 20 Javascript
微信小程序App生命周期详解
Jan 31 Javascript
详解.vue文件中style标签的几个标识符
Jul 17 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
Jul 03 Javascript
微信小程序onShareTimeline()实现分享朋友圈
Jan 07 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中使用Oracle数据库(6)
2006/10/09 PHP
php中jQuery插件autocomplate的简单使用笔记
2012/06/14 PHP
php截取字符串之截取utf8或gbk编码的中英文字符串示例
2014/03/12 PHP
深入讲解PHP Session及如何保持其不过期的方法
2015/08/18 PHP
PHP判断是否微信访问的方法示例
2019/03/27 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
javascript不同页面传值的改进版
2008/09/30 Javascript
JQuery通过Ajax提交表单并返回结果
2011/07/31 Javascript
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
Bootstrap每天必学之滚动监听
2016/03/16 Javascript
常用的javascript设计模式
2017/01/11 Javascript
Vue.js搭建移动端购物车界面
2020/06/28 Javascript
JS写谷歌浏览器chrome的外挂实例
2018/01/11 Javascript
TypeScript 运行时类型检查补充工具
2020/09/28 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
2021/01/05 Vue.js
Python打造出适合自己的定制化Eclipse IDE
2016/03/02 Python
Flask实现跨域请求的处理方法
2018/09/27 Python
python实现的Iou与Giou代码
2020/01/18 Python
Python安装与卸载流程详细步骤(图解)
2020/02/20 Python
如何使用python记录室友的抖音在线时间
2020/06/29 Python
关于PyCharm安装后修改路径名称使其可重新打开的问题
2020/10/20 Python
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
西班牙创意礼品和小工具网上商店:Curiosite
2016/07/26 全球购物
英国最大的奢侈品零售网络商城:Flannels
2016/09/16 全球购物
J2EE面试题
2016/03/14 面试题
大学四年的个人自我评价
2014/01/14 职场文书
党员干部2014全国两会学习心得体会
2014/03/10 职场文书
2015年元旦活动总结
2014/05/09 职场文书
计生工作先进事迹
2014/08/15 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
2014群众路线学习笔记
2014/11/06 职场文书
2014年房产经纪人工作总结
2014/12/08 职场文书
先进个人材料怎么写
2014/12/30 职场文书
入党积极分子党小组意见
2015/06/02 职场文书
结婚纪念日感言
2015/08/01 职场文书
开网店计划分析
2019/07/30 职场文书