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属性判断是否缓存
<!-- 这是vue3的写法,与vue2的写法有所区别,如果这里使用vue2.x写法,会有警告 --> <router-view v-slot="{ Component }"> <keep-alive> <component :is="Component" :key="$route.name" v-if="$route.meta.keepAlive" /> </keep-alive> <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" /> </router-view>
请注意上述代码当中有: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标签,表示缓存所有页面
<div id="app"> <keep-alive> <tar-bar></tar-bar> <div class="container"> <left-menu></left-menu> <Main /> </div> </keep-alive> </div>
方式二:按条件缓存,使用include,exclude判断是否缓存
// 1. 将缓存 name 为 cc 的组件,如果有多个,可用逗号分 <keep-alive include='cc,cc1,cc2'> <router-view/> </keep-alive> // 2. 将不缓存 name 为 cc 的组件 <keep-alive exclude='cc'> <router-view/> </keep-alive> // 3. 还可使用属性绑定动态判断 <keep-alive :include='includedComs'> <router-view/> </keep-alive>
方式三:在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中进行判断
<div id="app"> <!--keep-alive 表示页面不会被销毁,即保持页面状态--> <keep-alive> <router-view v-if="$route.meta.keepalive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepalive"></router-view> </div>
vue3中 keep-alive
1基本用法(通过插槽)
<router-view v-slot="{ Component }"> <keep-alive> <component :is="Component"/> </keep-alive> </router-view>
2条件缓存(通过插槽的方式)
示例:列表页面跳转到详情页面的情况,保证上一级页面的页面数据不会刷新,例如两个页面A页面—>>>列表页,B页面—>>>详情页,A–>>B–>>A ,缓存A页面的数据
<template> <router-view v-slot="{ Component }"> <keep-alive :include="includeList"> <component :is="Component"/> </keep-alive> </router-view> </template>
<script> import { reactive, watch, toRefs } from '@vue/runtime-core' import { useRoute, useRouter } export default { name: 'Test', setup(){ const state = reactive({ includeList: [] }) const route = useRoute() // const router = useRouter() watch(() => route,(newVal,oldVal)=>{ if(newVal.meta.keepAlive && state.includeList.indexOf(newVal.name) === -1){ state.includeList.push(newVal.name); console.log(state.includeList); } },{deep:true}) // 开启深度监听 return{ ...toRefs(state) } } } </script>
路由页面的配置
{ path: 'test', name: 'Test', component: () => import('@/views/Test'), meta: { keepAlive: true, // 组件需要缓存 } },
以上为个人经验,希望能给大家一个参考,也希望大家多多支持阿兔在线工具。