vue3.0中的keep-alive使用及说明
作者:jiahao778
这篇文章主要介绍了vue3.0中的keep-alive使用及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
keep-alive
用法
keep-alive是vue中的一个内置组件,通常用它来包裹一个动态组件,keep-alive 包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。
它有两个特殊的生命周期钩子activated 和 deactivated,在vue3.0里面生命周期函数前面都要加上on,onActivated,onDeactivated。
当组件在使用了keep-alive包裹时,正常的生命周期函数mounted和unmounted将不会执行,取而代之的是为它新增的这个两个特殊钩子函数。
vue3.0生命周期图:
属性
include
:只有名称匹配的组件会被缓存;类型可以是数组、字符串或者正则。exclude
:名称匹配的组件不会被缓存;类型可以是数组、字符串或者正则。max
:最多可以缓存多少组件实例。
vue3中使用
vue3中的写法和vue2中稍微有点不同,具体代码可以参考下方:
<router-view v-slot="{ Component, route }" id="pageWrapper"> <transition :name="transitionName" mode="out-in"> <keep-alive :include="cacheRouter"> <component :is="Component" /> </keep-alive> </transition> </router-view>
设置被缓存的路由 可以直接写死,把需要缓存的路由name写到一个数组中,这样最简单粗暴,不过不灵活,不建议使用这种方式
cacheRouter: ['home', 'order'];
通过设置路由原信息
在需要被缓存的组件的meta里面添加keepAlive标记
export const routes: RouteRecordRaw[] = [ { path: '/myLogin', name: 'myLogin', component: () => import('@/views/login/login.vue'), meta: { title: '登录', index: 1, keepAlive: true, }, }, ]; let cacheList: any[] = []; const keepAliveView = (_route: RouteRecordRaw[], _cache: RouteRecordName[]): void => { _route.forEach((item) => { item.meta?.keepAlive && item.name && _cache.push(item.name); }); }; //routes 路由配置数组 keepAliveView(routes, cacheList); export default cacheList;
vue3.0与vue2.0中keep-alive的用法区别
vue2.0
<keep-alive> <router-view /> </keep-alive>
vue3.0
<suspense> <router-view v-slot="{ Component }"> <keep-alive> <component :is="Component" /> </keep-alive> </router-view> </suspense>
注意点
如果 router-view 嵌套的子组件里面还有router-view, 那么子组件里面也要加上keep-alive
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。