转: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 后续文 ...
随机推荐
- div文本垂直居中(div text vertical aligan)
.box{ width: 135px;height: 84px;display: block; overflow: hidden; } .container { background:darkcyan ...
- JSON中JObject和JArray的修改
一.JObject 和JArray的添加.修改.移除 1.先添加一个json字符串,把json字符串加载到JObject中,然后转换成JObject.根据索引修改对象的属性值,移除属性,添加属性 us ...
- sniffer 和 debug flow
sniffer 和 debug flow sniffer 和 debug flow 复制模板,直接修改IP即可使用: diagnose sys session filter clear diagnos ...
- MT【85】正整数系数
评:这类与正整数有关的题,是很多学生所不习惯以及无从下手的.事实上很多时候要用到整数的这个性质:$m>n,m,n\in Z$则$m\ge n+1$,这道题用二次函数区间上有根的一般做法也可以,大 ...
- 【刷题】BZOJ 3944 Sum
Description Input 一共T+1行 第1行为数据组数T(T<=10) 第2~T+1行每行一个非负整数N,代表一组询问 Output 一共T行,每行两个用空格分隔的数ans1,ans ...
- 学习Spring Boot:(十八)Spring Boot 中session共享
前言 前面我们将 Redis 集成到工程中来了,现在需要用它来做点实事了.这次为了解决分布式系统中的 session 共享的问题,将 session 托管到 Redis. 正文 引入依赖 除了上篇文章 ...
- ARG102E:Stop. Otherwise...
传送门 Sol 对于每个 \(i\) ,可以把 \(k\) 个数字分成 \((x,i-x)\) 的若干组. 那么就是求每组只能其中选择一个且可以重复的方案数. 预处理 \(f[i][j]\) 表示从 ...
- 洛谷P4774 BZOJ5418 LOJ2721 [NOI2018]屠龙勇士(扩展中国剩余定理)
题目链接: 洛谷 BZOJ LOJ 题目大意:这么长的题面,就饶了我吧emmm 这题第一眼看上去没法列出同余方程组.为什么?好像不知道用哪把剑杀哪条龙…… 仔细一看,要按顺序杀龙,所以获得的剑出现的顺 ...
- java执行shell脚本并输出执行情况
1.脚本test.sh,置于/Users/hdwang目录下 #!/bin/sh cd /Users/hdwang echo ls:`ls` ;i<=;i++)); do + ); sleep ...
- C#列表所有IIS站点以及相关站点属性
using System; using System.Drawing; using System.Collections; using System.ComponentModel; using Sys ...