vue中keep-alive的用法及问题描述


Posted in Javascript onMay 15, 2018

1.keep-alive的作用以及好处

在做电商有关的项目中,当我们第一次进入列表页需要请求一下数据,当我从列表页进入详情页,详情页不缓存也需要请求下数据,然后返回列表页,这时候我们使用keep-alive来缓存组件,防止二次渲染,这样会大大的节省性能。

2.keep-alive的基本用法

在app.vue中

<!-- 缓存所有的页面 -->
<keep-alive>
 <router-view v-if="$route.meta.keep_alive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keep_alive"></router-view>

需要缓存的组件内容直接在router中添加:

meta: {
 keepAlive: true // true 表示需要使用缓存 false表示不需要被缓存
 }

3.keep-alive的生命周期

当引入keep-alive的时候,页面第一次进入,钩子的触发顺序created-> mounted-> activated,退出时触发deactivated。当再次进入(前进或者后退)时,只触发activated。

下面看下vue中 keep-alive 的使用问题及解决方案

问题描述

在业务开发中,会有路由跳转但是返回需要保留数据的场景;vue 中提供了 keep-alive 来处理

解决方案

返回dom不让其重新刷新,在vue-view外面包一层, 当引入keep-alive的时候,页面第一次进入,钩子的触发顺序created-> mounted-> activated,退出时触发deactivated。当再次进入(前进或者后退)时,只触发activated。

 事件挂载的方法等,只执行一次的放在 mounted 中;组件每次进去执行的方法放在 activated 中;
 可以将 是否包裹 keep-alive 通过参数配置;

<keep-alive>
  <router-view v-if="$route.meta.keepAlive" style="min-height:100%"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" style="min-height:100%"></router-view>
//不需要刷新的路由配置里面配置 meta: {keepAlive: true}, 这个路由则显示在上面标签;
//需要刷新的路由配置里面配置 meta: {keepAlive: false}, 这个路由则显示在下面标签;

总结

以上所述是小编给大家介绍的vue中keep-alive的用法及问题描述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery实现的可隐藏重现的靠边悬浮层实例代码
May 27 Javascript
简单的两种Extjs formpanel加载数据的方式
Nov 09 Javascript
bootstrap改变按钮加载状态
Dec 01 Javascript
javascript简单实现类似QQ头像弹出效果的方法
Aug 03 Javascript
jquery实现最简单的滑动菜单效果代码
Sep 12 Javascript
jquery实现右侧栏菜单选择操作
Mar 04 Javascript
JS闭包可被利用的常见场景小结
Apr 09 Javascript
使用JavaScript实现alert的实例代码
Jul 06 Javascript
利用node.js实现反向代理的方法详解
Jul 24 Javascript
JavaScript变量类型以及变量作用域详解
Aug 14 Javascript
微信小程序基于picker实现级联菜单
Feb 15 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
Aug 03 Javascript
react中使用swiper的具体方法
May 15 #Javascript
vue addRoutes实现动态权限路由菜单的示例
May 15 #Javascript
浅谈AngularJS中$http服务的简单用法
May 15 #Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
May 15 #Javascript
解决linux下node.js全局模块找不到的问题
May 15 #Javascript
vue :src 文件路径错误问题的解决方法
May 15 #Javascript
利用npm 安装删除模块的方法
May 15 #Javascript
You might like
php排序算法(冒泡排序,快速排序)
2012/10/09 PHP
DOM XPATH获取img src值的query
2013/09/23 PHP
php对二维数组按指定键值key排序示例代码
2013/11/26 PHP
9个实用的PHP代码片段分享
2015/01/22 PHP
Smarty缓存机制实例详解【三种缓存方式】
2019/07/20 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
IE无法设置短域名下Cookie
2010/09/23 Javascript
JS图片无缝、平滑滚动代码
2014/03/11 Javascript
javaScript语法总结
2016/11/25 Javascript
微信小程序 页面跳转和数据传递实例详解
2017/01/19 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
js is_valid_filename验证文件名的函数
2017/07/19 Javascript
vue事件修饰符和按键修饰符用法总结
2017/07/25 Javascript
通过js控制时间,一秒一秒自己动的实例
2017/10/25 Javascript
vue.js+element-ui动态配置菜单的实例
2018/09/07 Javascript
node错误处理与日志记录的实现
2018/12/24 Javascript
vue循环数组改变点击文字的颜色
2019/10/14 Javascript
解决vue的touchStart事件及click事件冲突问题
2020/07/21 Javascript
python pandas dataframe 按列或者按行合并的方法
2018/04/12 Python
用python生成1000个txt文件的方法
2018/10/25 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
Python3.7 读取音频根据文件名生成脚本的代码
2020/04/07 Python
python用TensorFlow做图像识别的实现
2020/04/21 Python
Python调用OpenCV实现图像平滑代码实例
2020/06/19 Python
H5混合开发app如何升级的方法
2018/01/10 HTML / CSS
英国领先的鞋类零售商和顶级品牌的官方零售商:Wynsors
2020/02/17 全球购物
年会主持词结束语
2014/03/27 职场文书
出国留学经济担保书
2014/04/01 职场文书
酒店餐厅2014重阳节活动策划方案
2014/09/16 职场文书
2014年标准化工作总结
2014/12/17 职场文书
晚会开幕词
2015/01/28 职场文书
2015年监理个人工作总结
2015/05/23 职场文书
《百分数的认识》教学反思
2016/02/19 职场文书
2016年“我们的节日·中秋节”活动总结
2016/04/05 职场文书
2019年教师入党申请书
2019/06/27 职场文书
redis三种高可用方式部署的实现
2021/05/11 Redis