详解关于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 相关文章推荐
JQuery 中几个类选择器的简单使用介绍
Mar 14 Javascript
js实现倒计时时钟的示例代码
Dec 17 Javascript
JS动态调用方法名示例介绍
Dec 18 Javascript
js函数与php函数的区别实例浅析
Jan 12 Javascript
JavaScript 消息框效果【实现代码】
Apr 27 Javascript
js和jQuery设置Opacity半透明 兼容IE6
May 24 Javascript
Javascript自定义事件详解
Jan 13 Javascript
jQuery插件jquery.kxbdmarquee.js实现无缝滚动效果
Feb 15 Javascript
微信小程序 图片加载(本地,网路)实例详解
Mar 10 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
Feb 09 Javascript
javascript自定义右键菜单插件
Dec 16 Javascript
vue通过过滤器实现数据格式化
Jul 20 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代码检查代理ip的有效性
2016/08/19 PHP
PHP中的Iterator迭代对象属性详解
2019/04/12 PHP
window.location和document.location的区别分析
2008/12/23 Javascript
基于Jquery的温度计动画效果
2010/06/18 Javascript
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
优化Jquery,提升网页加载速度
2013/11/14 Javascript
JavaScript数组去重的3种方法和代码实例
2015/07/01 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
2016/04/06 Javascript
jquery解析XML及获取XML节点名称的实现代码
2016/05/18 Javascript
判断横屏竖屏(三种)
2017/02/13 Javascript
js实现导航吸顶效果
2017/02/24 Javascript
JS验证全角与半角及相互转化的介绍
2017/05/18 Javascript
template.js前端模板引擎使用详解
2017/10/10 Javascript
ES6扩展运算符用法实例分析
2017/10/31 Javascript
angular6的table组件开发的实现示例
2018/12/26 Javascript
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
laydate只显示时分 不显示秒的功能实现方法
2019/09/28 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
2020/04/07 Javascript
python连接mysql数据库示例(做增删改操作)
2013/12/31 Python
Python使用内置json模块解析json格式数据的方法
2017/07/20 Python
python机器学习之神经网络(一)
2017/12/20 Python
详解Python是如何实现issubclass的
2019/07/24 Python
Python通过zookeeper实现分布式服务代码解析
2020/07/22 Python
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
2013/01/09 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
2018/10/22 HTML / CSS
String这个类型的class为何定义成final?
2012/11/13 面试题
药剂学专业应届生自荐信
2013/09/29 职场文书
地理科学专业毕业生求职信
2013/10/15 职场文书
高二生物教学反思
2014/01/27 职场文书
《小小竹排画中游》教学反思
2014/02/26 职场文书
党员领导干部廉洁从政承诺书
2014/03/27 职场文书
小学运动会班级口号
2014/06/09 职场文书
经典禁毒标语
2014/06/16 职场文书
青年文明号口号
2014/06/17 职场文书
讲党性心得体会
2014/09/03 职场文书
酒会开场白大全
2015/06/01 职场文书