详解关于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 相关文章推荐
JS URL传中文参数引发的乱码问题
Sep 02 Javascript
Javascript将string类型转换int类型
Dec 09 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
Aug 21 Javascript
使用jQuery的easydrag插件实现可拖动的DIV弹出框
Feb 19 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
May 17 Javascript
js中获取 table节点各tr及td的内容简单实例
Oct 14 Javascript
Angular2中Bootstrap界面库ng-bootstrap详解
Oct 18 Javascript
详解JavaScript模块化开发
Dec 04 Javascript
jQuery简单实现MD5加密的方法
Mar 03 Javascript
还不懂递归?读完这篇文章保证你会懂
Jul 29 Javascript
浅谈react-router@4.0 使用方法和源码分析
Jun 04 Javascript
jQuery列表动态增加和删除的实现方法
Nov 05 jQuery
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
正则表达式语法
2006/10/09 Javascript
Session的工作方式
2006/10/09 PHP
php加密之discuz内容经典加密方式实例详解
2017/02/04 PHP
JavaScript 直接操作本地文件的实现代码
2009/12/01 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
2015/03/23 Javascript
浅析Node.js的Stream模块中的Readable对象
2015/07/29 Javascript
AngularJS通过ng-route实现基本的路由功能实例详解
2016/12/13 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
2017/02/10 Javascript
JavaScript hasOwnProperty() 函数实例详解
2017/08/04 Javascript
利用ES6的Promise.all实现至少请求多长时间的实例
2017/08/28 Javascript
javascript实现循环广告条效果
2017/12/12 Javascript
Vue实现用户自定义字段显示数据的方法
2018/08/28 Javascript
微信小程序实现单选选项卡切换效果
2020/06/19 Javascript
JS实现判断有效的数独算法示例
2019/02/25 Javascript
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
js+canvas实现简单扫雷小游戏
2021/01/22 Javascript
Vue清除定时器setInterval优化方案分享
2020/07/21 Javascript
js仿京东放大镜效果
2020/08/09 Javascript
python多进程操作实例
2014/11/21 Python
Windows和Linux下Python输出彩色文字的方法教程
2017/05/02 Python
python的构建工具setup.py的方法使用示例
2017/10/23 Python
用Eclipse写python程序
2018/02/10 Python
使用python实现简单五子棋游戏
2019/06/18 Python
python向字符串中添加元素的实例方法
2019/06/28 Python
python使用tomorrow实现多线程的例子
2019/07/20 Python
Python MongoDB 插入数据时已存在则不执行,不存在则插入的解决方法
2019/09/24 Python
keras小技巧——获取某一个网络层的输出方式
2020/05/23 Python
python中delattr删除对象方法的代码分析
2020/12/15 Python
HTML5标签嵌套规则详解【必看】
2016/04/26 HTML / CSS
HSRP的含义以及如何工作
2014/09/10 面试题
2014年十一国庆节活动方案
2014/09/16 职场文书
教师拔河比赛广播稿
2014/10/14 职场文书
毕业生对母校寄语
2015/02/26 职场文书
优秀团员自我评价
2015/03/10 职场文书
民事起诉书范本
2015/05/19 职场文书
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL