谈谈keep-alive的理解

1、概念

keep-alive是Vue的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁。

2、功能

keep-alive是系统自带的一个组件，用来缓存组件，避免多次加载相同的组件，减少性能消耗，提高用户体验。

3、使用场景

列表页进入详情页，如果在列表页点击的都是相同的，详情页就不用请求多次了，直接缓存起来就行了，如果点击的不同，则需要重新请求数据。

4、使用方式

方式一：在App.vue中使用keep-alive标签，表示缓存所有页面

  <div id="app"><keep-alive><tar-bar></tar-bar><div class="container"><left-menu></left-menu><Main /></div></keep-alive></div>

方式二：按条件缓存，使用include，exclude判断是否缓存

// 1. 将缓存 name 为 cc 的组件,如果有多个，可用逗号分<keep-alive include='cc'><router-view/></keep-alive>
// 2. 将不缓存 name 为 cc 的组件<keep-alive exclude='cc'><router-view/></keep-alive>
// 3. 还可使用属性绑定动态判断<keep-alive :include='includedComs'><router-view/></keep-alive>

方式三：在router目录下的index.js中，

第一步使用meta:{keepAlive = true },表示需要缓存

 const routes = [{path:'/',component:Home,meta:{keepalive:true}},{path:'/login',component:Login},{path:'/edit',component:Edit,meta:{istoken: true}},{path:'/home',component:Home,meta:{keepalive:true}}
]

第二步在App.vue中进行判断

<div id="app"><!--keep-alive 表示页面不会被销毁，即保持页面状态--><keep-alive><router-view v-if="$route.meta.keepalive"></router-view></keep-alive><router-view v-if="!$route.meta.keepalive"></router-view></div>

Props：
- include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
- exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
- max - 数字。最多可以缓存多少组件实例。

谈谈keep-alive的理解相关推荐

Java面试之谈谈对Volatile的理解
谈谈对Volatile的理解 Volatile在日常的单线程环境是应用不到的 Volatile是Java虚拟机提供的轻量级的同步机制(三大特性) 保证可见性不保证原子性禁止指令重排可能这么说,还 ...
谈谈对MVVM的理解
谈谈对MVVM的理解什么是MVVM 不管是MVC,MVP,或者MVVM,都是常见的软件架构设计模式(Architectural Pattern),它通过分离关注点来改进代码的组织方式.不同于设计模式 ...
谈谈对this的理解
谈谈对this的理解什么是this 每个函数在被调用时都会创建一个执行上下文,这个上下文包含了变量环境.this.作用域链等,this就是执行上下文中的一个属性,他是在函数运行时进行绑定的,this ...
什么是面向对象？谈谈对面向对象的理解？
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录一.什么是面向对象?谈谈对面向对象的理解? 二.3大特征: 1.封装: 2.继承: 2.多态: 总结一.什么是面向对象?谈 ...
jvm对于java的意义_谈谈对JVM的理解
JVM可谓是学习JAVA基础中的基础了,但仍有不少同学对JVM概念还是比较模糊,甚至没有听说过,对java的理解也只是在基础语法层面,本文就将对JVM进行初步介绍,因篇幅所限,只能介绍JVM基础,如 ...
谈谈对springioc的理解
https://www.cnblogs.com/xdp-gacl/p/4249939.html 转载学习过Spring框架的人一定都会听过Spring的IoC(控制反转) .DI(依赖注入)这两个概 ...
读Java核心技术36讲有感——谈谈对Java的理解，谈谈Exception和Error
读过杨晓峰老师的36讲之后,想总结下自己的感想,写下来也有助于记忆,方便以后面试查阅和复习.题目所提到的话题本来是两讲,但是由于感想篇幅较短,所以合成一篇来写. 一.谈谈对Java平台的理解: 1.J ...
谈谈对python的理解_浅谈对python pandas中 inplace 参数的理解
这篇文章主要介绍了对python pandas中 inplace 参数的理解,具有很好的参考价值,希望对大家有所帮助.一起跟随小编过来看看吧 pandas 中 inplace 参数在很多函数中都会有, ...
谈谈对MVC的理解（View+Model+Controller）
1) 什么是MVC? MVC是一种设计思想,根据职责不同将程序中的组件分成以下3个部分. V(View视图):负责与用户交互.将数据展现,或者是接收数据 M(Model模型):负责业务处理.业务模型, ...
谈谈对 Spring 的理解
认识 Spring 框架 Spring 框架是 Java 应用最广的框架,它的成功来源于理念,而不是技术本身,它的理念包括 IoC (Inversion of Control,控制反转) 和 AOP( ...

谈谈keep-alive的理解

谈谈keep-alive的理解相关推荐

最新文章

热门文章