vue3.0中的keep-alive使用及说明
更新时间：2023年05月20日 14:21:39 作者：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
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue-cli3 从搭建到优化的详细步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
这篇文章主要介绍了深度了解vue.js中hooks的相关知识，生命周期钩子提供了一些 方法 ，因此你可以在组件生命周期的不同时刻精确地触发某些操作。当我们将组件实例化时，组件会被创建，反之会被销毁。,需要的朋友可以参考下2019-06-06
这篇文章主要介绍了vue 2.0组件与v-model的相关资料，文中介绍的非常详细，本文适合初学组件编写的同学阅读，需要的朋友可以参考借鉴，下面来一起看看吧。2017-03-03
这篇文章主要介绍了Vue项目业务逻辑，不同的项目有不同的功能，不同的功能需要不同的实现，实现这些核心功能的代码就叫业务逻辑。所以说业务逻辑是指一个实体单元为了向另一个实体单元提供服务，应该具备的规则与流程2022-11-11
在开发工作过程中，我们会遇到各种各样的表格数据导入，动态数据导入可以减少人为操作，减少出错。本文为大家介绍了Vue3实现动态导入Excel表格数据的方法，需要的可以参考一下2022-11-11
这篇文章主要介绍了使用echarts点击按钮从新渲染图表并更新数据方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了vue路由切换时取消之前的所有请求操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
unplugin-auto-import与unplugin-vue-components安装问题解析
这篇文章主要为大家介绍了unplugin-auto-import与unplugin-vue-components问题解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
本篇文章主要介绍了vue过滤器在v2.0版本用法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要为大家详细介绍了vue实现移动端可拖拽式icon图标，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
最新评论