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.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></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

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

(2)动态判断
<keep-alive :include="includedComponents">
<router-view></router-view>
</keep-alive>

includedComponents动态设置即可

vue2.0 keep-alive最佳实践的更多相关文章

  1. Vuex2.0+Vue2.0构建备忘录应用实践

    一.介绍Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,适合于构建中大型单页应用. ...

  2. Android 6.0 权限管理最佳实践

    博客: Android 6.0 运行时权限管理最佳实践 github: https://github.com/yanzhenjie/AndPermission

  3. 【重点突破】—— Vue2.0 transition 动画Demo实践填坑

    前言:vue1.0版本和2.0版本的过渡系统改变是很大的,具体请详看文档介绍.本文转载自郭锦荣的博客,一共列举了四种transition的使用实践,分别是css过渡.css动画.javascript钩 ...

  4. Zabbix3.0安装部署最佳实践

    Zabbix介绍 1.1zabbix 简介 Zabbix 是一个高度集成的网络监控解决方案,可以提供企业级的开源分布式监控解决方案,由一个国外的团队持续维护更新,软件可以自由下载使用,运作团队靠提供收 ...

  5. 学习笔记TF061:分布式TensorFlow,分布式原理、最佳实践

    分布式TensorFlow由高性能gRPC库底层技术支持.Martin Abadi.Ashish Agarwal.Paul Barham论文<TensorFlow:Large-Scale Mac ...

  6. 转:vue2.0 keep-alive最佳实践

    转载至:https://segmentfault.com/a/1190000008123035 1.基本用法 vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性 ...

  7. Vue2.0 keep-alive 组件的最佳实践

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

  8. vue2.0 构建单页应用最佳实战

    vue2.0 构建单页应用最佳实战   前言 我们将会选择使用一些 vue 周边的库vue-cli, vue-router,vue-resource,vuex 1.使用 vue-cli 创建项目2.使 ...

  9. vue2.0 开发实践总结之入门篇

    vue2.0 据说也出了很久了,博主终于操了一次实刀. 整体项目采用  vue +  vue-router +  vuex (传说中的vue 全家桶 ),构建工具使用尤大大推出的vue-cli 后续文 ...

随机推荐

  1. Fedora 19关闭防火墙

    关闭防火墙systemctl stop firewalld.service 关闭开机启动防火墙systemctl disable firewalld.service

  2. css-preprocessors

    what ? 预处理器是css 能够使用 变量.操作符.函数.mixins.interpolations 等类似于js 功能的一种语言. 目前比较常用是三种:SASS.less .stylus . W ...

  3. 作业20171102 alpha-review 成绩

    申诉 对成绩有疑问或不同意见的同学,请在群里[@杨贵福]. 申诉时间截止2017年12月12日 17:00. 成绩 review NABCD-评论 SPEC-评论 例行报告 附加分数 合计 本周归一化 ...

  4. Onezero团队第三次站立会议随感

    >首先这是一个关于Android的小应用APP(记账本) >在Java基础薄弱的基础上尝试Android开发,让我感觉力不从心. >说实话本迭代周在程序设计,确实让我头疼,不知道怎么 ...

  5. Visual Studio 2013版本安装

    这周老师布置了关于Visual Studio 2013版本安装过程的概述,下面我就分享给大家看吧! 首先要下载安装文件,等待下载完成之后,虽然下载文件是ios格式,但我们可以用解压缩工具解压打开.解压 ...

  6. PairWork-电梯调度程序结对编程

    结对编程人员:050/184 1 结对编程 1.1 结对编程的优缺点 优点: ● 与单独开发相比,结对能够使人们在压力之下保持更好的状态.结对编程鼓励双方保持代码的高质量,即使在出现了让人不得不飞快地 ...

  7. 20135337——linux实践三:ELF文件格式分析(32位系统)

    ELF文件格式分析 可重定位文件 十六进制形式显示内容 显示各个段.符号表相关信息 查看各个段信息 elf文件头信息 段表 符号表信息 查看堆栈 具体分析 1.ELF文件头信息(小字节优先,均十六进制 ...

  8. Quartz.NET 入门,带C#实例

    概述 Quartz.NET是一个开源的作业调度框架,非常适合在平时的工作中,定时轮询数据库同步,定时邮件通知,定时处理数据等. Quartz.NET允许开发人员根据时间间隔(或天)来调度作业.它实现了 ...

  9. Linux下OSG的编译和安装以及遇到的问题

    (第一段日常扯蛋,大家不要看)由于我们教研室所做的RTMapper要用到GDAL,所以就打算看osgearth的源码来熟悉下GDAL库的使用,同时也了解下osgearth中关于带有高程的图像拼接.然而 ...

  10. PHP 4种输出的方式

    <?php //测试用的数组 $info = array('11'=>'aaa', '22'=>'bbb', '33'=>'ccc'); //第一种,将整个数组作为一个对象输出 ...