Vue3-KeepAlive,多个页面使用keepalive方式_vue.js_

Vue3-KeepAlive,多个页面使用keepalive

Vue3的生命周期

未添加keepAlive的生命周期

beforeCreate=>created=>beforeMount=>mounted=>beforeUpdate=>updated=>beforeUnmount=>unmounted

添加keepAlive的生命周期

• activated ：当keepalive包含的组件渲染的时候触发
• deactived ：当keepalive包含的组件销毁的时候触发
• keep-alive的生命周期
• activated： 页面第一次进入的时候，钩子触发的顺序是created->mounted->activated
• deactivated: 页面退出的时候会触发deactivated

当再次前进或者后退的时候只触发activated

在VueApp中配合vue-router使用keepalive

上一节了解到keepalive的生命周期后，大致就可以理解keepalive的意义，用于缓存页面信息，不重复渲染同样的内容。

可配合vue-router路由使用keepalive，在路由组件配置文件当中配置组件是否需要被缓存

配置meta属性，以Home组件为例,配置meta.keepAlive为true

{//主页 path: '/', name: 'Home', component: () => import(/* webpackChunkName: "about" */ '../views/Home.vue'), meta: { title: 'Home', keepAlive: true }, beforeRouteLeave: (to, from, next) => { console.log(to.meta); } } 

在根组件App.vue中使用keep-alive标签包含需要缓存的组件，这里根据$router.meta.keepAlive属性判断是否缓存

请注意上述代码当中有:key属性，通常多个页面会使用到keepAlive属性，如果是多个页面，那么必须加上:key属性，否则会报错。

效果图（首页及mv页不会重新加载）

Vue2和Vue3的keep-alive用法

vue3的keep-alive用法和vue2用法是不同的。

vue2 keep-alive

keep-alive概念：

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

keep-alive作用：

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

keep-alive使用方式:

方式一：在App.vue中使用keep-alive标签，表示缓存所有页面

方式二：按条件缓存，使用include，exclude判断是否缓存

// 1. 将缓存 name 为 cc 的组件,如果有多个，可用逗号分  // 2. 将不缓存 name 为 cc 的组件  // 3. 还可使用属性绑定动态判断 

方式三：在router目录下的index.js中，

第一步：使用meta:{keepAlive = true },表示需要缓存

 const routes = [ { path:'/', component:Home, meta:{ keepalive:true } }, { path:'/login', component:Login }, { path:'/edit', component:Edit, meta:{ istoken: true } }, { path:'/home', component:Home, meta:{ keepalive:true } } ] 

第二步：在App.vue中进行判断

vue3中 keep-alive

1基本用法（通过插槽）

2条件缓存（通过插槽的方式）

示例：列表页面跳转到详情页面的情况，保证上一级页面的页面数据不会刷新，例如两个页面A页面—>>>列表页，B页面—>>>详情页，A–>>B–>>A ，缓存A页面的数据

路由页面的配置

 { path: 'test', name: 'Test', component: () => import('@/views/Test'), meta: { keepAlive: true, // 组件需要缓存 } }, 

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。 

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！