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 相关文章推荐
QQ登录简单实现代码
Mar 09 Javascript
javascript 有趣而诡异的数组
Apr 06 Javascript
JavaScript学习笔记(二) js对象
Oct 25 Javascript
js去空格技巧分别去字符串前后、左右空格
Oct 21 Javascript
jQuery功能函数详解
Feb 01 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
Oct 06 Javascript
javascript操作cookie
Jan 17 Javascript
如何正确理解javascript的模块化
Mar 02 Javascript
layui 监听表格复选框选中值的方法
Aug 15 Javascript
js实现继承的方法及优缺点总结
May 08 Javascript
ES6 Proxy实现Vue的变化检测问题
Jun 11 Javascript
手把手教您实现react异步加载高阶组件
Apr 07 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
数据库相关问题
2006/10/09 PHP
GBK的页面输出JSON格式的php函数
2010/02/16 PHP
php提示undefined index的几种解决方法
2012/05/21 PHP
PHP获取MSN好友列表类的实现代码
2013/06/23 PHP
thinkPHP2.1自定义标签库的导入方法详解
2016/07/20 PHP
yii的入口文件index.php中为什么会有这两句
2016/08/04 PHP
php中遍历二维数组并以表格的形式输出的方法
2017/01/03 PHP
jQuery中读取json文件示例代码
2013/05/10 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
Javascript获取随机数的实现方法
2016/06/22 Javascript
Nodejs 发送Post请求功能(发短信验证码例子)
2017/02/09 NodeJs
JavaScript数组迭代方法
2017/03/03 Javascript
nodejs之get/post请求的几种方式小结
2017/07/26 NodeJs
SpringMVC简单整合Angular2的示例
2017/07/31 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
基于Datatables跳转到指定页的简单实例
2017/11/09 Javascript
AngularJS修改model值时,显示内容不变的实例
2018/09/13 Javascript
nodejs基础之多进程实例详解
2018/12/27 NodeJs
30分钟用Node.js构建一个API服务器的步骤详解
2019/05/24 Javascript
python快速排序代码实例
2013/11/21 Python
python使用beautifulsoup从爱奇艺网抓取视频播放
2014/01/23 Python
pandas修改DataFrame列名的方法
2018/04/08 Python
python实现银联支付和支付宝支付接入
2019/05/07 Python
Python的条件锁与事件共享详解
2019/09/12 Python
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
Django框架中间件定义与使用方法案例分析
2019/11/28 Python
Pytorch中的自动求梯度机制和Variable类实例
2020/02/29 Python
Pycharm最常用的快捷键及使用技巧
2020/03/05 Python
Anaconda+Pycharm环境下的PyTorch配置方法
2020/03/13 Python
Python virtualenv虚拟环境实现过程解析
2020/04/18 Python
英国第一家领先的在线处方眼镜零售商:Glasses Direct
2018/02/23 全球购物
Joie官方网上商店:购买服装和女装配饰
2018/06/05 全球购物
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
本科生自荐信
2014/06/18 职场文书
2015年重阳节主持词
2015/07/04 职场文书
详解Javascript实践中的命令模式
2021/05/05 Javascript