Vue keep-alive Vue keep-alive实践总结（推荐）

HanYif 2021-03-29 我要评论

想了解Vue keep-alive实践总结（推荐）的相关内容吗，HanYif在本文为您仔细讲解Vue keep-alive的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：vue,keep,alive，下面大家一起来学习吧。

<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

<keep-alive>https://m.qb5200.com/包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和https://m.qb5200.com/<transition>https://m.qb5200.com/相似，<keep-alive>https://m.qb5200.com/是一个抽象组件：它自身不会渲染一个https://m.qb5200.com/DOMhttps://m.qb5200.com/元素，也不会出现在父组件链中。

prop:

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

在2.1.0版本Vue中

常见用法：

//https://m.qb5200.com/组件 exporthttps://m.qb5200.com/defaulthttps://m.qb5200.com/{ https://m.qb5200.com/name:https://m.qb5200.com/'test-keep-alive', https://m.qb5200.com/datahttps://m.qb5200.com/()https://m.qb5200.com/{ https://m.qb5200.com/returnhttps://m.qb5200.com/{ https://m.qb5200.com/https://m.qb5200.com/includedComponents:https://m.qb5200.com/"test-keep-alive" https://m.qb5200.com/} https://m.qb5200.com/} }

<keep-alivehttps://m.qb5200.com/include="test-keep-alive"> https://m.qb5200.com/ https://m.qb5200.com/<component></component> </keep-alive> <keep-alivehttps://m.qb5200.com/include="a,b"> https://m.qb5200.com/ https://m.qb5200.com/<componenthttps://m.qb5200.com/:is="view"></component> </keep-alive>  <keep-alivehttps://m.qb5200.com/:include="/a|b/"> https://m.qb5200.com/<componenthttps://m.qb5200.com/:is="view"></component> </keep-alive>  <keep-alivehttps://m.qb5200.com/:include="includedComponents"> https://m.qb5200.com/<router-view></router-view> </keep-alive> <keep-alivehttps://m.qb5200.com/exclude="test-keep-alive"> https://m.qb5200.com/ https://m.qb5200.com/<component></component> </keep-alive>

结合router，缓存部分页面

使用$route.meta的keepAlive属性：

<keep-alive> https://m.qb5200.com/<router-viewhttps://m.qb5200.com/v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-viewhttps://m.qb5200.com/v-if="!$route.meta.keepAlive"></router-view>

需要在router中设置router的元信息meta：

//...router.js exporthttps://m.qb5200.com/defaulthttps://m.qb5200.com/newhttps://m.qb5200.com/Router({ https://m.qb5200.com/routes:https://m.qb5200.com/[ https://m.qb5200.com/{ https://m.qb5200.com/https://m.qb5200.com/path:https://m.qb5200.com/'/', https://m.qb5200.com/https://m.qb5200.com/name:https://m.qb5200.com/'Hello', https://m.qb5200.com/https://m.qb5200.com/component:https://m.qb5200.com/Hello, https://m.qb5200.com/https://m.qb5200.com/meta:https://m.qb5200.com/{ https://m.qb5200.com/https://m.qb5200.com/keepAlive:https://m.qb5200.com/falsehttps://m.qb5200.com///https://m.qb5200.com/不需要缓存 https://m.qb5200.com/https://m.qb5200.com/} https://m.qb5200.com/}, https://m.qb5200.com/{ https://m.qb5200.com/https://m.qb5200.com/path:https://m.qb5200.com/'/page1', https://m.qb5200.com/https://m.qb5200.com/name:https://m.qb5200.com/'Page1', https://m.qb5200.com/https://m.qb5200.com/component:https://m.qb5200.com/Page1, https://m.qb5200.com/https://m.qb5200.com/meta:https://m.qb5200.com/{ https://m.qb5200.com/https://m.qb5200.com/keepAlive:https://m.qb5200.com/truehttps://m.qb5200.com///https://m.qb5200.com/需要被缓存 https://m.qb5200.com/https://m.qb5200.com/} https://m.qb5200.com/} https://m.qb5200.com/] })

Vue keep-alive Vue keep-alive实践总结（推荐）

相关文章

猜您喜欢

今日热门