keep-alive的使用及注意点
以Vue提供了一个内置组件keep-alive来缓存组件内部状态,避免重新渲染。(在开发Vue项目的时候,有一部分部分组件是没必要多次渲染的)keep-alive属性:include - 字符串或正则表达式。只有匹配的组件会被缓存。exclude - 字符串或正则表达式。任何匹配的组件都不会被缓存。用法:缓存动态组件:<keep-alive>包裹动态组件时,会缓存不活动
以Vue提供了一个内置组件keep-alive
来缓存组件内部状态,避免重新渲染。(在开发Vue项目的时候,有一部分部分组件是没必要多次渲染的)
keep-alive属性:
include - 字符串或正则表达式。只有匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何匹配的组件都不会被缓存。
用法:
缓存动态组件:
<keep-alive>
包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们(此种方式并无太大的实用意义)。
<!-- 基本 -->
<keep-alive>
<component :is="view"></component>
</keep-alive>
<!-- 多个条件判断的子组件 -->
<keep-alive>
<comp-a v-if="a > 1"></comp-a>
<comp-b v-else></comp-b>
</keep-alive>
缓存路由组件:
使用keep-alive
可以将所有路径匹配到的路由组件都缓存起来,包括路由组件里面的组件,keep-alive
大多数使用场景就是这种。
方式一:vue文件中
<keep-alive>
<router-view></router-view>
</keep-alive>
方式二:router.js中
{
path: '/as',
icon: 'earth',
title: '赠品管理',
name: 'as',
component: Main,
children: [{
path: 'a',
title: '赠品管理',
name: 'a',
component: () =>
import ('@/views/a/index.vue'),
meta:{
keepAlive:true
}
}]
}
缓存你想要缓存的:
使用v-if
通过路由元信息判断缓存哪些路由
<keep-alive>
<router-view v-if="$route.meta.keepAlive">
<!--这里是会被缓存的路由-->
</router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive">
<!--因为用的是v-if 所以下面还要创建一个未缓存的路由视图出口-->
</router-view>
//router配置
new Router({
routes: [
{
path: '/',
name: 'home',
component: Home,
meta: {
keepAlive: true // 需要被缓存
}
},
{
path: '/edit',
name: 'edit',
component: Edit,
meta: {
keepAlive: false // 不需要被缓存
}
}
]
});
生命周期钩子:
在被keep-alive
包含的组件/路由中,会多出两个生命周期的钩子:activated
与 deactivated
activated在组件第一次渲染时会被调用,之后在每次缓存组件被激活时调用
deactivated:组件被停用(离开路由)时调用
注意:使用了keep-alive
就不会调用beforeDestroy
(组件销毁前钩子)和destroyed
(组件销毁),因为组件没被销毁,被缓存起来了。
我不想把查询条件和查询结果被缓存,那么我可以这样写:
mounted: function() {
this.loaddata(1)
},
activated: function () {
this.productclass.name=""//查询条件
this.loaddata(1) //查询结果的方法
}
新增属性:
include:匹配的 路由/组件 会被缓存
exclude:匹配的 路由/组件 不会被缓存
include和exclude支持三种方式来有条件的缓存路由:采用逗号分隔的字符串形式,正则形式,数组形式。
正则和数组形式,必须采用v-bind形式来使用。
缓存组件的使用方式:
<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
<component :is="view"></component>
</keep-alive>
<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
<component :is="view"></component>
</keep-alive>
<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
<component :is="view"></component>
</keep-alive>
但更多场景中,我们会使用keep-alive
来缓存路由:
<keep-alive include='a'>
<router-view></router-view>
</keep-alive>
注:当组件被exclude
匹配,该组件将不会被缓存,不会调用activated
和 deactivated
。
更多推荐
所有评论(0)