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.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最佳实践的更多相关文章
- Vuex2.0+Vue2.0构建备忘录应用实践
一.介绍Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,适合于构建中大型单页应用. ...
- Android 6.0 权限管理最佳实践
博客: Android 6.0 运行时权限管理最佳实践 github: https://github.com/yanzhenjie/AndPermission
- 【重点突破】—— Vue2.0 transition 动画Demo实践填坑
前言:vue1.0版本和2.0版本的过渡系统改变是很大的,具体请详看文档介绍.本文转载自郭锦荣的博客,一共列举了四种transition的使用实践,分别是css过渡.css动画.javascript钩 ...
- Zabbix3.0安装部署最佳实践
Zabbix介绍 1.1zabbix 简介 Zabbix 是一个高度集成的网络监控解决方案,可以提供企业级的开源分布式监控解决方案,由一个国外的团队持续维护更新,软件可以自由下载使用,运作团队靠提供收 ...
- 学习笔记TF061:分布式TensorFlow,分布式原理、最佳实践
分布式TensorFlow由高性能gRPC库底层技术支持.Martin Abadi.Ashish Agarwal.Paul Barham论文<TensorFlow:Large-Scale Mac ...
- 转:vue2.0 keep-alive最佳实践
转载至:https://segmentfault.com/a/1190000008123035 1.基本用法 vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性 ...
- Vue2.0 keep-alive 组件的最佳实践
1.基本用法 vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗 <keep-alive> <component> <!-- ...
- vue2.0 构建单页应用最佳实战
vue2.0 构建单页应用最佳实战 前言 我们将会选择使用一些 vue 周边的库vue-cli, vue-router,vue-resource,vuex 1.使用 vue-cli 创建项目2.使 ...
- vue2.0 开发实践总结之入门篇
vue2.0 据说也出了很久了,博主终于操了一次实刀. 整体项目采用 vue + vue-router + vuex (传说中的vue 全家桶 ),构建工具使用尤大大推出的vue-cli 后续文 ...
随机推荐
- Fedora 19关闭防火墙
关闭防火墙systemctl stop firewalld.service 关闭开机启动防火墙systemctl disable firewalld.service
- css-preprocessors
what ? 预处理器是css 能够使用 变量.操作符.函数.mixins.interpolations 等类似于js 功能的一种语言. 目前比较常用是三种:SASS.less .stylus . W ...
- 作业20171102 alpha-review 成绩
申诉 对成绩有疑问或不同意见的同学,请在群里[@杨贵福]. 申诉时间截止2017年12月12日 17:00. 成绩 review NABCD-评论 SPEC-评论 例行报告 附加分数 合计 本周归一化 ...
- Onezero团队第三次站立会议随感
>首先这是一个关于Android的小应用APP(记账本) >在Java基础薄弱的基础上尝试Android开发,让我感觉力不从心. >说实话本迭代周在程序设计,确实让我头疼,不知道怎么 ...
- Visual Studio 2013版本安装
这周老师布置了关于Visual Studio 2013版本安装过程的概述,下面我就分享给大家看吧! 首先要下载安装文件,等待下载完成之后,虽然下载文件是ios格式,但我们可以用解压缩工具解压打开.解压 ...
- PairWork-电梯调度程序结对编程
结对编程人员:050/184 1 结对编程 1.1 结对编程的优缺点 优点: ● 与单独开发相比,结对能够使人们在压力之下保持更好的状态.结对编程鼓励双方保持代码的高质量,即使在出现了让人不得不飞快地 ...
- 20135337——linux实践三:ELF文件格式分析(32位系统)
ELF文件格式分析 可重定位文件 十六进制形式显示内容 显示各个段.符号表相关信息 查看各个段信息 elf文件头信息 段表 符号表信息 查看堆栈 具体分析 1.ELF文件头信息(小字节优先,均十六进制 ...
- Quartz.NET 入门,带C#实例
概述 Quartz.NET是一个开源的作业调度框架,非常适合在平时的工作中,定时轮询数据库同步,定时邮件通知,定时处理数据等. Quartz.NET允许开发人员根据时间间隔(或天)来调度作业.它实现了 ...
- Linux下OSG的编译和安装以及遇到的问题
(第一段日常扯蛋,大家不要看)由于我们教研室所做的RTMapper要用到GDAL,所以就打算看osgearth的源码来熟悉下GDAL库的使用,同时也了解下osgearth中关于带有高程的图像拼接.然而 ...
- PHP 4种输出的方式
<?php //测试用的数组 $info = array('11'=>'aaa', '22'=>'bbb', '33'=>'ccc'); //第一种,将整个数组作为一个对象输出 ...