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函数参数的可修改性问题
Dec 05 Javascript
js日期对象兼容性的处理方法
Jan 28 Javascript
javascript中的undefined和not defined区别示例介绍
Feb 26 Javascript
js实现鼠标滚轮控制图片缩放效果的方法
Feb 20 Javascript
js实现鼠标经过表格行变色的方法
May 12 Javascript
JavaScript使用addEventListener添加事件监听用法实例
Jun 01 Javascript
js中跨域方法原理详解
Jul 19 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 Javascript
AngularJS 霸道的过滤器小结
Apr 26 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
May 16 Javascript
Layui弹出层 加载 做编辑页面的方法
Sep 16 Javascript
webpack常用配置总览(小结)
Nov 18 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输出控制功能在简繁体转换中的应用
2006/10/09 PHP
谷歌音乐搜索栏的提示功能php修正代码
2011/05/09 PHP
解析PHP对现有搜索引擎的调用
2013/06/25 PHP
PHP定时执行任务实现方法详解(Timer)
2015/07/30 PHP
PHP的Yii框架中移除组件所绑定的行为的方法
2016/03/18 PHP
总结的一些PHP开发中的tips(必看篇)
2017/03/24 PHP
一个javascript参数的小问题
2008/03/02 Javascript
javascript中字符串拼接需注意的问题
2010/07/13 Javascript
js编写trim()函数及正则表达式的运用
2013/10/24 Javascript
2014 HTML5/CSS3热门动画特效TOP10
2014/12/07 Javascript
JQuery.validationEngine表单验证插件(推荐)
2016/12/10 Javascript
JavaScript数组的5种迭代方法
2017/09/29 Javascript
vuejs实现本地数据的筛选分页功能思路详解
2017/11/15 Javascript
JavaScript中变量、指针和引用功能与操作示例
2018/08/04 Javascript
浅谈Vue数据响应
2018/11/05 Javascript
Vue 无限滚动加载指令实现方法
2019/05/28 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
2019/12/04 Javascript
[47:45]Liquid vs OG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
django 2.0更新的10条注意事项总结
2018/01/05 Python
numpy.random.seed()的使用实例解析
2018/02/03 Python
使用Flask集成bootstrap的方法
2018/07/24 Python
在PyCharm下使用 ipython 交互式编程的方法
2019/01/17 Python
开启Django博客的RSS功能的实现方法
2020/02/17 Python
详解CSS的border边框属性及其在CSS3中的新特性
2016/05/10 HTML / CSS
css3实现多个元素依次显示效果
2017/12/12 HTML / CSS
为智能设备设计个性化保护套网站:caseable
2017/01/05 全球购物
会计工作决心书
2014/03/11 职场文书
超市仓管员岗位职责
2014/04/07 职场文书
初三开学计划书
2014/04/27 职场文书
2014年医院十一国庆节活动方案
2014/09/15 职场文书
购房协议书范本
2014/10/02 职场文书
2014年大学生村官工作总结
2014/11/19 职场文书
慰问信的写作格式及范文!
2019/06/24 职场文书
送给客户微信问候语!
2019/07/04 职场文书
Python实现智慧校园自动评教全新版
2021/06/18 Python
MySQL 中如何归档数据的实现方法
2022/03/16 SQL Server