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 相关文章推荐
Jquery数独游戏解析(一)-页面布局
Nov 05 Javascript
JS特效实现图片自动播放并可控的效果
Jul 31 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
Dec 04 Javascript
js计算系统当前日期是星期几的方法
Jul 14 Javascript
ES6新特征数字、数组、字符串
Oct 01 Javascript
JS实现弹出下载对话框及常见文件类型的下载
Jul 13 Javascript
使用JavaScript实现一个小程序之99乘法表
Sep 21 Javascript
jQuery实现的页面遮罩层功能示例【测试可用】
Oct 14 jQuery
iview table render集成switch开关的实例
Mar 14 Javascript
layui 富文本赋值,取值,取纯文本值的实例
Sep 18 Javascript
js模拟实现烟花特效
Mar 10 Javascript
Javascript数组及类数组相关原理详解
Oct 29 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 危险函数解释 分析
2009/04/22 PHP
使用Smarty 获取当前日期时间和格式化日期时间的方法详解
2013/06/18 PHP
php中json_encode处理gbk与gb2312中文乱码问题的解决方法
2014/07/10 PHP
Chrome Web App开发小结
2014/09/04 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
PHP中echo与print区别点整理
2021/03/09 PHP
JS维吉尼亚密码算法实现代码
2010/11/09 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
2015/10/01 Javascript
基于JS实现新闻列表无缝向上滚动实例代码
2016/01/22 Javascript
老生常谈JavaScript 函数表达式
2016/09/01 Javascript
Javascript获取background属性中url的值
2016/10/17 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
2017/01/11 Javascript
JS验证字符串功能
2017/02/22 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
2017/03/01 Javascript
vue-dialog的弹出层组件
2020/05/25 Javascript
Vue 进阶教程之v-model详解
2017/05/06 Javascript
jquery实现回车键触发事件(实例讲解)
2017/11/21 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
2017/12/18 jQuery
Angular8引入百度Echarts进行图表分析的实现代码
2019/11/27 Javascript
小程序新版订阅消息模板消息
2019/12/31 Javascript
Node.js API详解之 vm模块用法实例分析
2020/05/27 Javascript
全面了解python中的类,对象,方法,属性
2016/09/11 Python
浅谈Django学习migrate和makemigrations的差别
2018/01/18 Python
python opencv肤色检测的实现示例
2020/12/21 Python
求网格中的黑点分布
2013/11/06 面试题
初中女生自我鉴定
2013/12/19 职场文书
贷款担保书范文
2014/05/13 职场文书
共青团员自我评价范文
2014/09/14 职场文书
2014年人大工作总结
2014/12/10 职场文书
离婚协议书的范本
2015/01/27 职场文书
团员个人年度总结
2015/02/26 职场文书
电影复兴之路观后感
2015/06/02 职场文书
悬崖上的金鱼姬观后感
2015/06/15 职场文书
2015年基层党建工作汇报材料
2015/06/25 职场文书
html实现弹窗的实例
2021/06/09 HTML / CSS