vue2.0 keep-alive最佳实践


Posted in Javascript onJuly 06, 2017

vue2.0 keep-alive的最佳实践,供大家参考,具体内容如下

1.基本用法

vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗

<keep-alive>
<component>
 <!-- 组件将被缓存 -->
</component>
</keep-alive>

有时候 可能需要缓存整个站点的所有页面,而页面一般一进去都要触发请求的
在使用keep-alive的情况下

<keep-alive><router-view></router-view></keep-alive>

将首次触发请求写在created钩子函数中,就能实现缓存,
比如列表页,去了详情页 回来,还是在原来的页面

2.缓存部分页面或者组件

(1)使用router. meta属性

// 这是目前用的比较多的方式
<keep-alive>
  <router-view v-if="!$route.meta.notKeepAlive"></router-view>
</keep-alive>
<router-view v-if="$route.meta.notKeepAlive"></router-view>

router设置

... 
 routes: [
  { path: '/', redirect: '/index', component: Index, meta: { keepAlive: true }},
  {
   path: '/common',
   component: TestParent,
   children: [
    { path: '/test2', component: Test2, meta: { keepAlive: true } } 
   ]
  }
  ....
  // 表示index和test2都使用keep-alive

(2).使用新增属性inlcude/exclude

2.1.0后提供了include/exclude两个属性 可以针对性缓存相应的组件

<!-- comma-delimited string -->
<keep-alive include="a,b">
 <component :is="view"></component>
</keep-alive>
<!-- regex (use v-bind) -->
<keep-alive :include="/a|b/">
 <component :is="view"></component>
</keep-alive>

//其中a,b是组件的name

注意:这种方法都是预先知道组件的名称的

(3)动态判断

<keep-alive :include="includedComponents">
 <router-view></router-view>
</keep-alive>

includedComponents动态设置即可

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
showModelessDialog()使用详解
Sep 21 Javascript
[转]JS宝典学习笔记
Feb 07 Javascript
第一个JavaScript入门基础 document.write输出
Feb 22 Javascript
合并table相同单元格的jquery插件分享(很精简)
Jun 20 Javascript
jQuery EasyUI API 中文文档 - Dialog对话框
Nov 15 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
Jan 16 Javascript
基于jQuery+JSON的省市二三级联动效果
Jun 05 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
Oct 30 Javascript
常用jQuery选择器汇总
Feb 02 Javascript
JavaScript中清空数组的三种方式
Mar 22 Javascript
axios对请求各种异常情况处理的封装方法
Sep 25 Javascript
在博客园博文中添加自定义右键菜单的方法详解
Feb 05 Javascript
angular框架实现全选与单选chekbox的自定义
Jul 06 #Javascript
详解Angular Reactive Form 表单验证
Jul 06 #Javascript
让div运动起来 js实现缓动效果
Jul 06 #Javascript
老生常谈Bootstrap媒体对象
Jul 06 #Javascript
jQuery实现选中行变色效果(实例讲解)
Jul 06 #jQuery
运用jQuery写的验证表单(实例讲解)
Jul 06 #jQuery
Textarea输入字数限制实例(兼容iOS&amp;安卓)
Jul 06 #Javascript
You might like
在php MYSQL中插入当前时间
2008/04/06 PHP
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
php采集中国代理服务器网的方法
2015/06/16 PHP
PHP strip_tags保留多个HTML标签的方法
2016/05/22 PHP
Laravel 连接(Join)示例
2019/10/16 PHP
PHP超全局变量实现原理及代码解析
2020/09/01 PHP
javascript动画效果类封装代码
2007/08/28 Javascript
自写的一个jQuery圆角插件
2010/10/26 Javascript
javascript格式化日期时间方法汇总
2015/06/19 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
2016/09/26 Javascript
ES6新特性之字符串的扩展实例分析
2017/04/01 Javascript
node+vue实现用户注册和头像上传的实例代码
2017/07/20 Javascript
Angular利用trackBy提升性能的方法
2018/01/26 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
2018/01/30 Javascript
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
解决Vue调用springboot接口403跨域问题
2019/09/02 Javascript
[43:24]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS Liquid
2018/03/30 DOTA
python爬取网站数据保存使用的方法
2013/11/20 Python
Python字符串拼接、截取及替换方法总结分析
2016/04/13 Python
Python简单实现控制电脑的方法
2018/01/22 Python
python导出hive数据表的schema实例代码
2018/01/22 Python
Python爬虫使用Selenium+PhantomJS抓取Ajax和动态HTML内容
2018/02/23 Python
python 内置模块详解
2019/01/01 Python
python实现弹窗祝福效果
2019/04/07 Python
python3 map函数和filter函数详解
2019/08/26 Python
详解pytorch中squeeze()和unsqueeze()函数介绍
2020/09/03 Python
python中封包建立过程实例
2021/02/18 Python
CSS3制作日历实现代码
2012/01/21 HTML / CSS
8款精美的CSS3表单设计(登录表单/下拉选择/按钮附演示及源码)
2013/02/04 HTML / CSS
国外平面设计素材网站:The Hungry JPEG
2017/03/28 全球购物
亚马逊意大利站点:Amazon.it
2020/12/31 全球购物
总裁办公室主任职责
2014/01/02 职场文书
国培远程培训感言
2014/03/08 职场文书
养成教育经验材料
2014/05/26 职场文书
安全员岗位职责范本
2015/04/11 职场文书
自书遗嘱范文
2015/08/07 职场文书