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 相关文章推荐
js的event详解。
Sep 06 Javascript
一段多浏览器的&quot;复制到剪贴板&quot;javascript代码
Mar 27 Javascript
jQuery下通过$.browser来判断浏览器.
Apr 05 Javascript
Ajax搜索结果页面下方的分页按钮的生成
Apr 05 Javascript
找出字符串中出现次数最多的字母和出现次数精简版
Nov 07 Javascript
javascript显示中文日期的方法
Jun 18 Javascript
js基于cookie方式记住返回页面用法示例
May 27 Javascript
js,jq,css多方面实现简易下拉菜单功能
May 13 Javascript
Next.js实现react服务器端渲染的方法示例
Jan 06 Javascript
详解VUE单页应用骨架屏方案
Jan 17 Javascript
JavaScript解析机制与闭包原理实例详解
Mar 08 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
Dec 11 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
德生S2000电路分析
2021/03/02 无线电
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
2014/06/23 PHP
php实现图片上传并进行替换操作
2016/03/15 PHP
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
理解JavaScript的caller,callee,call,apply
2009/04/28 Javascript
js 表单提交后按钮变灰的实例代码
2013/08/16 Javascript
编程语言JavaScript简介
2014/10/16 Javascript
jQuery实现简单下拉导航效果
2015/09/07 Javascript
yarn与npm的命令行小结
2016/10/20 Javascript
Vue cli 引入第三方JS和CSS的常用方法分享
2018/01/20 Javascript
layer弹出层父子页面事件相互调用方法
2018/08/17 Javascript
node.js中express模块创建服务器和http模块客户端发请求
2019/03/06 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
2019/05/14 Javascript
JS实现电脑虚拟键盘打字测试
2020/06/24 Javascript
vue 内联样式style中的background用法说明
2020/08/05 Javascript
Javascript如何递归遍历本地文件夹
2020/08/06 Javascript
[03:01]完美盛典趣味短片 DOTA2年度最佳&拉胯英雄
2019/12/07 DOTA
[01:00:30]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第二场 10.31
2020/11/02 DOTA
python实现ip查询示例
2014/03/26 Python
使用Python脚本操作MongoDB的教程
2015/04/16 Python
Python pass详细介绍及实例代码
2016/11/24 Python
详解python里使用正则表达式的分组命名方式
2017/10/24 Python
Python中filter与lambda的结合使用详解
2019/12/24 Python
python logging设置level失败的解决方法
2020/02/19 Python
python 如何利用argparse解析命令行参数
2020/09/11 Python
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
2012/06/04 HTML / CSS
德国排名第一的主题公园门票网站:Attraction Tickets Direct
2019/09/09 全球购物
JBL美国官方商店:扬声器、耳机等
2019/12/01 全球购物
幼师专业毕业生自荐信
2013/09/29 职场文书
电子信息专业学生自荐信
2013/11/09 职场文书
营销总经理岗位职责
2014/02/02 职场文书
战友聚会主持词
2014/04/02 职场文书
尊师重教演讲稿
2014/09/04 职场文书
小区保洁员岗位职责
2015/04/10 职场文书
嘉年华活动新闻稿
2015/07/17 职场文书
Golang gRPC HTTP协议转换示例
2022/06/16 Golang