关于Vue中keep-alive的作用是什么？怎么使用？

一、概念：

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

二、作用：

用来缓存组件，避免多次加载相同的组件，减少性能消耗，提高用户体验。

三、属性

include:字符串或正则表达式。只有匹配的组件会被缓存。
exclude:字符串或正则表达式。任何匹配的组件都不会被缓存。

四、使用场景

比如：有一个列表页面和一个详情页面，那么用户可能会经常执行打开详情 => 返回列表 => 打开详情，那么就可以对列表组件使用进行缓存，这样用户每次返回列表的时候，都能从缓存中快速渲染，而不是重新渲染页面，从而节省内存开销。

五、使用方式:

5.1. 在App.vue中使用`keep-alive`组件，来缓存所有页面

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

5.2. 按条件缓存，使用include，exclude判断是否缓存

5.2.1. 将缓存 name 为 keep的组件，如果有多个，可用逗号分

<keep-alive include='keep'><router-view/>
</keep-alive>

5.2.2. 将不缓存 name 为 nokeep的组件

<keep-alive exclude='nokeep'><router-view/>
</keep-alive>

5.2.3. 还可使用属性绑定动态判断

<keep-alive :include='includedFun'><router-view/>
</keep-alive>

5.3. 在router目录下的index.js中，

5.3.1. 使用meta: { keepAlive = true }, 表示需要缓存

 const routes = [{path: '/',component: Home},{path:'/ login',component: Login},{path: '/list',component: List,meta: {isKeep: true}},{path: '/detail',component: Detail,meta:{isKeep: true}}
]

5.3.2. 在App.vue中进行判断

<div id="app"><keep-alive><router-view v-if="$route.meta.isKeep"></router-view></keep-alive><router-view></router-view></div>

关于Vue中keep-alive的作用是什么？怎么使用？相关推荐

vue中组件的导出导入_5.2 vue中 keep-alive 组件的作用，详细解释keep-alive使用方法...
问题:vue中 keep-alive 组件的作用 keep-alive:主要用于保留组件状态或避免重新渲染. 比如: 有一个列表页面和一个详情页面,那么用户就会经常执行打开详情=>返回列表=& ...
Vue中key属性的作用
Vue中key属性的作用在列表渲染时使用key属性使用key属性强制替换元素在列表渲染时使用key属性相信大多数Vue开发者接触到key属性的时候是使用v-for进行列表渲染的时候,如果不使用 ...
vue中的key的作用？
一.写在前面下面总结一下,vue中的key的作用,在vue中我们可能在两种情况下使用key,第一种情况下就是在v-if中,第二种情况下就是在v-for中使用key.下面我们来看一下key在其中起到的 ...
vue中：key的作用
key是为每个vnode指定唯一的id,在同级vnode的Diff过程中,可以根据key快速的进行对比,来判断是否为相同节点,利用 key 的唯一性生成 map 对象来获取对应节点,比遍历方式更快,指 ...
Vue中的 key 的作用是什么？
这个问题,其实也是经常问的,对于刚刚毕业的大学生来说, 面试官问:vue中循环遍历数组的时候,为什么要加 key/key的作用是什么? 看一下官网的回答 key属性主要在 vue 的虚拟 DOM算法, ...
vue中render函数的作用及解析
在vue脚手架的main.js文件中,存在这样一段代码: 意思是对vue实例的配置,其中render函数的作用是,将h创建的Node节点信息return返回给Vue.js底层处理文件中的beforeM ...
vue中keepAlive组件的作用及使用方式
在面试的时候,很多面试官再问vue的时候可能就会提一嘴,你知道keep-alive有什么作用吗? keep-alive是vue内置的一个组件,而这个组件的作用就是能够缓存不活动的组件,我们能够知道,一 ...
小知识：vue中的name的作用
官方文档解释说的太简洁,以至于很多人还不是很理解这句话的含义,其实看到这句话我也是半懂半懵还好在某视频中,老师实例解释name的含义,终于基本懂了 1.递归组件运用(指组件自身组件调用自身组件) ...
vue中v-model.trim的作用
.trim 自动过滤输入内容最开始和最后的空格,中间的会保留一个空格,多的会被过滤掉
Vue 中常见的面试题/知识点整理
看看面试题,只是为了查漏补缺,看看自己那些方面还不懂.切记不要以为背了面试题,就万事大吉了,最好是理解背后的原理,这样面试的时候才能侃侃而谈.不然,稍微有水平的面试官一看就能看出,是否有真才实学还是刚 ...

关于Vue中keep-alive的作用是什么？怎么使用？

一、概念：

二、作用：

三、属性

四、使用场景

五、使用方式:

5.1. 在App.vue中使用`keep-alive`组件，来缓存所有页面

5.2. 按条件缓存，使用include，exclude判断是否缓存

5.3. 在router目录下的index.js中，

关于Vue中keep-alive的作用是什么？怎么使用？相关推荐

最新文章

热门文章

关于Vue中keep-alive的作用是什么？怎么使用？

一、概念：

二、作用：

三、属性

四、使用场景

五、使用方式:

5.1. 在App.vue中使用keep-alive组件，来缓存所有页面

5.2. 按条件缓存，使用include，exclude判断是否缓存

5.3. 在router目录下的index.js中，

关于Vue中keep-alive的作用是什么？怎么使用？相关推荐

最新文章

热门文章

5.1. 在App.vue中使用`keep-alive`组件，来缓存所有页面