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 相关文章推荐
实现连缀调用的map方法(prototype)
Aug 05 Javascript
jQuery+jqmodal弹出窗口实现代码分明
Jun 14 Javascript
jQuery示例收集
Nov 05 Javascript
JQuery中的$.getJSON 使用说明
Mar 10 Javascript
uploadify 3.0 详细使用说明
Jun 18 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
May 31 Javascript
浅析jquery某一元素重复绑定的问题
Jan 03 Javascript
javascript实现加载xml文件的方法
Nov 24 Javascript
js简单判断移动端系统的方法
Feb 25 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
Jun 28 Javascript
JavaScript 链式结构序列化详解
Sep 30 Javascript
JS+HTML5实现图片在线预览功能
Jul 22 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下几个常用的去空、分组、调试数组函数
2009/02/22 PHP
解析php中反射的应用
2013/06/18 PHP
Discuz7.2版的faq.php SQL注入漏洞分析
2014/08/06 PHP
Zend Framework教程之路由功能Zend_Controller_Router详解
2016/03/07 PHP
PHP-FPM 设置多pool及配置文件重写操作示例
2019/10/02 PHP
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
2009/12/27 Javascript
javascript简易缓动插件(源码打包)
2012/02/16 Javascript
javascript HTML5文件上传FileReader API
2020/03/27 Javascript
JavaScript 中 avalon绑定属性总结
2016/10/19 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
vue.js实现刷新当前页面的方法教程
2017/07/05 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
2018/01/23 Javascript
如何获取TypeScript的声明文件.d.ts
2018/05/01 Javascript
JS中DOM元素的attribute与property属性示例详解
2018/09/04 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
2019/02/18 Javascript
了解javascript中的Dom操作
2019/05/27 Javascript
vue实现搜索过滤效果
2019/05/28 Javascript
Vue之Mixins(混入)的使用方法
2019/09/24 Javascript
javascript实现智能手环时间显示
2020/09/18 Javascript
详解Python 数据库 (sqlite3)应用
2016/12/07 Python
Python使用QRCode模块生成二维码实例详解
2017/06/14 Python
更新修改后的Python模块方法
2019/03/03 Python
python使用Plotly绘图工具绘制散点图、线形图
2019/04/02 Python
基于python分析你的上网行为 看看你平时上网都在干嘛
2019/08/13 Python
Python人工智能之路 jieba gensim 最好别分家之最简单的相似度实现
2019/08/13 Python
Python数据可视化 pyecharts实现各种统计图表过程详解
2019/08/15 Python
python matplotlib折线图样式实现过程
2019/11/04 Python
Python udp网络程序实现发送、接收数据功能示例
2019/12/09 Python
励志演讲稿300字
2014/08/21 职场文书
保管员岗位职责
2015/02/14 职场文书
法律进社区活动总结
2015/05/07 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
保护环境建议书作文500字
2015/09/14 职场文书
初三化学教学反思
2016/02/22 职场文书
详解Python自动化之文件自动化处理
2021/06/21 Python
MySQL系列之二 多实例配置
2021/07/02 MySQL