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 相关文章推荐
js取得url地址参数实例
Feb 22 Javascript
jQuery中:selected选择器用法实例
Jan 04 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
Oct 11 Javascript
jQuery事件绑定方法学习总结(推荐)
Nov 21 Javascript
详解JS中的快速排序与冒泡
Jan 10 Javascript
jQuery html表格排序插件tablesorter使用方法详解
Feb 10 Javascript
BootStrap Validator 根据条件在JS中添加或移除校验操作
Oct 12 Javascript
微信小程序如何像vue一样在动态绑定类名
Apr 17 Javascript
如何优雅地在vue中添加权限控制示例详解
Mar 07 Javascript
原生JS 实现的input输入时表格过滤操作示例
Aug 03 Javascript
vue+element导航栏高亮显示的解决方式
Nov 12 Javascript
element-ui封装一个Table模板组件的示例
Jan 04 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
可快速识别放射性物质-国外大神教你diy一个开放式辐射探测器
2020/03/12 无线电
使用Linux五年积累的一些经验技巧
2013/06/20 PHP
教你如何在CI框架中使用 .htaccess 隐藏url中index.php
2014/06/09 PHP
如何使用Gitblog和Markdown建自己的博客
2015/07/31 PHP
初学Javascript的一些总结
2008/11/03 Javascript
JavaScript中实现块作用域的方法
2010/04/01 Javascript
js实现select组件的选择输入过滤代码
2014/10/14 Javascript
js实现鼠标触发图片抖动效果的方法
2015/02/27 Javascript
Js自动截取字符串长度,添加省略号(……)的实现方法
2017/03/06 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
2017/04/27 Javascript
Express + Node.js实现登录拦截器的实例代码
2017/07/01 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
微信小程序开发问题之wx.previewImage
2018/12/25 Javascript
学习node.js 断言的使用详解
2019/03/18 Javascript
vue cli使用融云实现聊天功能的实例代码
2019/04/19 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
2019/08/02 Javascript
微信小程序实现手势滑动卡片效果
2019/08/26 Javascript
[02:28]DOTA2 2017国际邀请赛小组赛回顾
2017/08/09 DOTA
Python 获取新浪微博的最新公共微博实例分享
2014/07/03 Python
python 转换 Javascript %u 字符串为python unicode的代码
2016/09/06 Python
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
Python实现获取前100组勾股数的方法示例
2018/05/04 Python
numpy判断数值类型、过滤出数值型数据的方法
2018/06/09 Python
python安装twisted的问题解析
2018/08/21 Python
Django框架之DRF 基于mixins来封装的视图详解
2019/07/23 Python
python turtle工具绘制四叶草的实例分享
2020/02/14 Python
用 Python 制作地球仪的方法
2020/04/24 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
基于HTML5代码实现折叠菜单附源码下载
2015/11/27 HTML / CSS
大四学生毕业自荐信
2013/11/07 职场文书
心得体会范文
2014/01/04 职场文书
小学优秀辅导员事迹材料
2014/05/11 职场文书
简单通用的简历自我评价
2014/09/21 职场文书
业务员工作态度散漫检讨书
2014/11/02 职场文书
总经理司机岗位职责
2015/04/10 职场文书
八年级英语教学反思
2016/02/15 职场文书