转:vue2.0 keep-alive最佳实践
转载至:https://segmentfault.com/a/1190000008123035
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
注意
:这种方法都是预先知道组件的名称的
(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最佳实践
1.基本用法 vue2.0提供了一个keep-alive组件用来缓存组件,避免多次加载相应的组件,减少性能消耗 <keep-alive> <component> <!-- ...
- 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 后续文 ...
随机推荐
- linux 开机直接进入命令行
一.图形界面和命令行切换 linux系统在启动图形化界面后,可以在图形界面和命令行之间来回切换,linux提供了6个命令行终端(terminal或Console),分别为tty1——tty6,使用Ct ...
- PSP(4.13——4.19)以及周记录
1.PSP 4.13 15:15 15:30 0 15 站立会议 A Y min 15:30 19:00 65 145 Account A Y min 21:15 23:00 15 90 博客 B Y ...
- 原理分析dubbo分布式应用中使用zipkin做链路追踪
zipkin是什么 Zipkin是一款开源的分布式实时数据追踪系统(Distributed Tracking System),基于 Google Dapper的论文设计而来,由 Twitter 公司开 ...
- 3分钟带你搞懂ES6 import 和 export
如下语句是 default import: // B.js import A from './A' 且只在A存在 default export 时生效: // A.js export default ...
- Java学习之String
一.String介绍(引用类型)1.java.lang.String字符串.用""括住的时字符串,都可以看做是实现此类的实例类String中也有许多简单方法 2.特点1).字符串不 ...
- MySQL5.7 的编译安装
转: 5.7的安装: https://www.insp.top/article/make-install-mysql-5-7 5.6的安装: https://www.chenyudong.com/ar ...
- poj 2482 Stars in Your Window + 51Nod1208(扫描线+离散化+线段树)
Stars in Your Window Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 13196 Accepted: ...
- 【题解】 bzoj1911: [Apio2010]特别行动队 (动态规划+斜率优化)
bzoj1911,懒得复制,戳我戳我 Solution: 线性DP(打牌) \(dp\)方程还是很好想的:\(dp[i]=dp[j-1]+a*(s[i]-s[j-1])^2+b*(s[i]-s[j-1 ...
- 【BZOJ1201】[HNOI2005]数三角形(暴力)
[BZOJ1201][HNOI2005]数三角形(暴力) 题面 BZOJ 洛谷 题解 预处理每个点向四个方向可以拓展的最大长度,然后钦定一个点作为三角形的某个顶点,暴力枚举三角形长度,检查这样一个三角 ...
- 解题:HDU 5868 Different Circle Permutation
题面 先往上套Burnside引理 既然要求没有$\frac{2*π}{n}$的角,也就是说两个人不能挨着,那么相当于给一个环黑白染色,两个相邻的点不能染白色,同时求方案数.考虑$n$个置换子群,即向 ...