详解关于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匿名函数用法分析
Feb 13 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
Mar 24 Javascript
深入浅析Bootstrap列表组组件
May 03 Javascript
基于jQuery实现淡入淡出效果轮播图
Jul 31 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
May 17 Javascript
Angular2生命周期钩子函数的详细介绍
Jul 10 Javascript
详解mpvue开发小程序小总结
Jul 25 Javascript
微信小程序时间轴实现方法示例
Jan 14 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
Jul 13 Javascript
通过原生vue添加滚动加载更多功能
Nov 21 Javascript
Vue微信公众号网页分享的示例代码
May 28 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
Jun 05 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制作图型计数器的例子
2006/10/09 PHP
Phpbean路由转发的php代码
2008/01/10 PHP
php5中date()得出的时间为什么不是当前时间的解决方法
2008/06/30 PHP
php HandlerSocket的使用
2011/05/02 PHP
php入门学习知识点七 PHP函数的基本应用
2011/07/14 PHP
php数组函数序列之array_unique() - 去除数组中重复的元素值
2011/10/29 PHP
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
对于Laravel 5.5核心架构的深入理解
2018/02/22 PHP
javascript编程起步(第一课)
2007/01/10 Javascript
用js实现层随着内容大小动态渐变改变 推荐
2009/12/19 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
Json和Jsonp理论实例代码详解
2013/11/15 Javascript
我的Node.js学习之路(三)--node.js作用、回调、同步和异步代码 以及事件循环
2014/07/06 Javascript
sogou地图API用法实例教程
2014/09/11 Javascript
jQuery不兼容input的change事件问题解决过程
2014/12/05 Javascript
JavaScript弹出新窗口后向父窗口输出内容的方法
2015/04/06 Javascript
Webpack打包慢问题的完美解决方法
2017/03/16 Javascript
详解vue父子组件间传值(props)
2017/06/29 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
python 使用正则表达式按照多个空格分割字符的实例
2018/12/20 Python
Python实现简单石头剪刀布游戏
2021/01/20 Python
pycharm 中mark directory as exclude的用法详解
2020/02/14 Python
keras 多gpu并行运行案例
2020/06/10 Python
Ray-Ban雷朋美国官网:全球领先的太阳眼镜品牌
2016/07/20 全球购物
荷兰家电销售网站:Welhof
2020/12/08 全球购物
学年自我鉴定范文
2013/10/01 职场文书
演讲比赛获奖感言
2014/02/02 职场文书
公司领导班子群众路线四风问题对照检查材料
2014/10/02 职场文书
场地使用证明模板
2014/10/25 职场文书
丧事答谢词
2015/01/05 职场文书
区域经理岗位职责
2015/02/02 职场文书
学生会宣传部竞选稿
2015/11/21 职场文书
2016八一建军节慰问信
2015/11/30 职场文书
2019幼儿园感恩节活动策划书
2019/11/28 职场文书
Vue elementUI表单嵌套表格并对每行进行校验详解
2022/02/18 Vue.js