详解关于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 Ext JS 状态默认存储时间
Feb 15 Javascript
jquery tools之tooltip
Jul 25 Javascript
div层的移动及性能优化
Nov 16 Javascript
JS实现slide文字框缩放伸展效果代码
Nov 05 Javascript
简单谈谈JavaScript的同步与异步
Dec 31 Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 Javascript
JavaScript实现定时页面跳转功能示例
Feb 14 Javascript
Vue中的数据监听和数据交互案例解析
Jul 12 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
Oct 07 Javascript
React优化子组件render的使用
May 12 Javascript
微信小程序停止其他视频播放当前视频的实例代码
Dec 25 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
Aug 13 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 增加了对 .ZIP 文件的读取功能
2006/10/09 PHP
我的论坛源代码(七)
2006/10/09 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
php设计模式之职责链模式定义与用法经典示例
2019/09/19 PHP
wordpress之js库集合研究介绍
2007/08/17 Javascript
innerHTML 和 getElementsByName 在IE下面的bug 的解决
2010/04/09 Javascript
Jquery动态改变图片IMG的src地址示例
2013/06/25 Javascript
jQuery入门基础知识学习指南
2015/08/14 Javascript
javascript动态添加checkbox复选框的方法
2015/12/23 Javascript
微信小程序 下拉列表的实现实例代码
2017/03/08 Javascript
React Native react-navigation 导航使用详解
2017/12/01 Javascript
解决npm管理员身份install时出现权限的问题
2018/03/16 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
2018/04/23 Javascript
vue ssr 指南详读
2018/06/29 Javascript
详解如何在Angular优雅编写HTTP请求
2018/12/05 Javascript
详解json串反转义(消除反斜杠)
2019/08/12 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
python连接远程ftp服务器并列出目录下文件的方法
2015/04/01 Python
利用 Monkey 命令操作屏幕快速滑动
2016/12/07 Python
Python实现Logger打印功能的方法详解
2017/09/01 Python
Python解决N阶台阶走法问题的方法分析
2017/12/28 Python
解决python 未发现数据源名称并且未指定默认驱动程序的问题
2018/12/07 Python
Python使用psutil获取进程信息的例子
2019/12/17 Python
Python操作Jira库常用方法解析
2020/04/10 Python
Python根据字典的值查询出对应的键的方法
2020/09/30 Python
浅析HTML5的WebSocket与服务器推送事件
2016/02/19 HTML / CSS
老师自我鉴定范文
2013/12/25 职场文书
学校就业推荐信范文
2014/05/19 职场文书
中国在我心中演讲稿
2014/09/13 职场文书
审计局班子四风对照检查材料思想汇报
2014/10/07 职场文书
公务员检讨书
2014/11/01 职场文书
童年读书笔记
2015/06/26 职场文书
优秀志愿者感言
2015/08/01 职场文书
python爬取网页版QQ空间,生成各类图表
2021/06/02 Python
python识别围棋定位棋盘位置
2021/07/26 Python
高并发下Redis如何保持数据一致性(避免读后写)
2022/03/18 Redis