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 相关文章推荐
JavaScript 保存数组到Cookie的代码
Apr 14 Javascript
nullJavascript中创建对象的五种方法实例
May 07 Javascript
JS是按值传递还是按引用传递
Jan 30 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
Oct 23 Javascript
基于JavaScript实现网页倒计时自动跳转代码
Dec 28 Javascript
在JavaScript中调用Java类和接口的方法
Sep 07 Javascript
javascript防篡改对象实例详解
Apr 10 Javascript
详解angularJS自定义指令间的相互交互
Jul 05 Javascript
理解 javascript 中的函数表达式与函数声明
Jul 07 Javascript
angular+ionic返回上一页并刷新页面
Aug 08 Javascript
解决$store.getters调用不执行的问题
Nov 08 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
Sep 16 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
Protoss兵种介绍
2020/03/14 星际争霸
jQuery 开天辟地入门篇一
2009/12/09 Javascript
JS中获取数据库中的值的方法
2013/07/14 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
2013/11/13 Javascript
jQuery标签替换函数replaceWith()的使用例子
2014/08/28 Javascript
30个经典的jQuery代码开发技巧
2014/12/15 Javascript
Javascript连接Access数据库完整实例
2015/08/03 Javascript
JS截取字符串实例详解
2015/11/24 Javascript
AngularJS学习笔记之依赖注入详解
2016/05/16 Javascript
bootstrap table小案例
2016/10/21 Javascript
AngularJS模板加载用法详解
2016/11/04 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
2018/09/28 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
2018/12/10 Javascript
关于vue利用postcss-pxtorem进行移动端适配的问题
2019/11/20 Javascript
跟老齐学Python之玩转字符串(2)
2014/09/14 Python
Python中的ceil()方法使用教程
2015/05/14 Python
Python使用poplib模块和smtplib模块收发电子邮件的教程
2016/07/02 Python
python 换位密码算法的实例详解
2017/07/19 Python
python爬虫 使用真实浏览器打开网页的两种方法总结
2018/04/21 Python
python3.4 将16进制转成字符串的实例
2019/06/12 Python
python 多进程并行编程 ProcessPoolExecutor的实现
2019/10/11 Python
tensorflow指定GPU与动态分配GPU memory设置
2020/02/03 Python
python Django 反向访问器的外键冲突解决
2020/05/20 Python
浅谈Python 函数式编程
2020/06/20 Python
CSS3中颜色线性渐变实战
2015/07/18 HTML / CSS
建筑毕业生自我鉴定
2013/10/18 职场文书
高校自主招生自荐信
2013/12/09 职场文书
车间统计员岗位职责
2014/01/05 职场文书
社区健康教育实施方案
2014/03/18 职场文书
毕业生自荐信如何写
2014/03/24 职场文书
护校行动方案
2014/05/31 职场文书
老人再婚离婚协议书范本
2014/10/27 职场文书
乡镇防汛工作汇报
2014/10/28 职场文书
个人求职自荐信范文
2015/03/06 职场文书
2015年世界艾滋病日活动总结
2015/03/24 职场文书
暑期辅导班宣传单
2015/07/14 职场文书