vue2.0 keep-alive最佳实践

时间:2022-09-23 12:49:51

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&period;0&plus;Vue2&period;0构建备忘录应用实践

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

  2. Android 6&period;0 权限管理最佳实践

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. nginx location配置

    nginx location配置   location在nginx中起着重要作用,对nginx接收到的请求字符串进行处理,如地址定向.数据缓存.应答控制.代理转发等location语法location ...

  2. C语言学习笔记&lpar;1&rpar;&colon;Hello World&excl;

    #include <stdio.h> void main() { printf("Hello World!\n"); } 几乎学习任何语言接触到的第一个语言都是Hell ...

  3. jquery简单切换插件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  4. 创建webservice 用service&period;xml配置&lpar;复杂点的方法&rpar;

    用Axis2实现Web Service,虽然可以将POJO类放在axis2/WEB-INF/pojo目录中直接发布成Web Service,这样做不需要进行任何配置,但这些POJO类不能在任何包中.这 ...

  5. C&plus;&plus; 头文件系列&lpar;unordered&lowbar;map、unordered&lowbar;set&rpar;

    简介 很明显,这两个头文件分别是map.set头文件对应的unordered版本. 所以它们有一个重要的性质就是: 乱序 如何乱序 这个unorder暗示着,这两个头文件中类的底层实现----Hash ...

  6. Django&plus;Bootstrap&plus;Mysql 搭建个人博客(一)

    1.1.环境搭建 (1)虚拟环境 mkvirtualenv website pip install django==1.11.7 (2)创建项目和app:website和blog (3)设置中文set ...

  7. Failure to transfer org&period;apache&period;maven&period;plugins&colon;maven-surefire-plugin&colon;pom&colon;2&period;12&period;4

    Failure to transfer org.apache.maven.plugins:maven-surefire-plugin:pom:2.12.4 from https://repo.mave ...

  8. Event对象和触发

    1.构造: //非IE浏览器事件构造方法 var event = document.createEvent('HTMLEvents');//'HTMLEvents'自定义事件名 //IE浏览器构造方法 ...

  9. CSS--理解块级格式上下文(BFC)

    1.BFC 定义 BFC(Block formatting context)直译为"块级格式化上下文".它是一个独立的渲染区域,只有Block-level box(块级元素)参与, ...

  10. centos7&colon; iptables保存(配置完nginx的web规则后)

    centos7: iptables保存(配置完nginx的web规则后) 以本地虚拟机为例: 添加规则:入站规则 iptables -I INPUT -p tcp --dport 80 -j ACCE ...