Vue3-KeepAlive,多個頁面使用keepalive方式
Vue3-KeepAlive,多個頁面使用keepalive
Vue3的生命周期
未添加keepAlive的生命周期
beforeCreate=>created=>beforeMount=>mounted=>beforeUpdate=>updated=>beforeUnmount=>unmounted
添加keepAlive的生命周期
activated：當(dāng)keepalive包含的組件渲染的時候觸發(fā)deactived：當(dāng)keepalive包含的組件銷毀的時候觸發(fā)keep-alive的生命周期activated： 頁面第一次進(jìn)入的時候，鉤子觸發(fā)的順序是created->mounted->activateddeactivated: 頁面退出的時候會觸發(fā)deactivated
當(dāng)再次前進(jìn)或者后退的時候只觸發(fā)activated
在VueApp中配合vue-router使用keepalive
上一節(jié)了解到keepalive的生命周期后，大致就可以理解keepalive的意義，用于緩存頁面信息，不重復(fù)渲染同樣的內(nèi)容。
可配合vue-router路由使用keepalive，在路由組件配置文件當(dāng)中配置組件是否需要被緩存
配置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標(biāo)簽包含需要緩存的組件，這里根據(jù)$router.meta.keepAlive屬性判斷是否緩存
<!-- 這是vue3的寫法，與vue2的寫法有所區(qū)別，如果這里使用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>
請注意上述代碼當(dāng)中有:key屬性，通常多個頁面會使用到keepAlive屬性，如果是多個頁面，那么必須加上:key屬性，否則會報錯。
效果圖（首頁及mv頁不會重新加載）
Vue2和Vue3的keep-alive用法
vue3的keep-alive用法和vue2用法是不同的。
vue2 keep-alive
keep-alive概念：
keep-alive是Vue的內(nèi)置組件，當(dāng)它包裹動態(tài)組件時，會緩存不活動的組件實例，而不是銷毀。
keep-alive作用：
用來緩存組件，避免多次加載相同的組件，減少性能消耗，提高用戶體驗。
keep-alive使用方式:
方式一：在App.vue中使用keep-alive標(biāo)簽，表示緩存所有頁面
<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. 還可使用屬性綁定動態(tài)判斷
<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中進(jìn)行判斷
<div id="app">
<!--keep-alive 表示頁面不會被銷毀，即保持頁面狀態(tài)-->
<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條件緩存（通過插槽的方式）
示例：列表頁面跳轉(zhuǎn)到詳情頁面的情況，保證上一級頁面的頁面數(shù)據(jù)不會刷新，例如兩個頁面A頁面—>>>列表頁，B頁面—>>>詳情頁，A–>>B–>>A ，緩存A頁面的數(shù)據(jù)
<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}) // 開啟深度監(jiān)聽
return{
...toRefs(state)
}
}
}
</script>
路由頁面的配置
{
path: 'test',
name: 'Test',
component: () => import('@/views/Test'),
meta: {
keepAlive: true, // 組件需要緩存
}
},
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue中的scoped和 elememt-plus的樣式修改方法
Vue中的scoped屬性用于實現(xiàn)樣式隔離,確保組件間的樣式互不影響,通過在組件的style標(biāo)簽內(nèi)添加任何內(nèi)容,可以為組件生成一個唯一的哈希值,從而實現(xiàn)樣式的定位,本文通過實例代碼講解Vue中的scoped和 elememt-plus的樣式修改方法,感興趣的朋友一起看看吧2025-01-01
vue3實戰(zhàn)教程之a(chǎn)xios的封裝和環(huán)境變量
這篇文章主要給大家介紹了關(guān)于vue3實戰(zhàn)教程之a(chǎn)xios的封裝和環(huán)境變量的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-02-02
本篇文章主要介紹了vue.js 獲取當(dāng)前自定義屬性值，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)滑動驗證功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)表單單獨移除一個字段驗證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
Vue中使用XMLHttpRequest（XHR）可以獲取數(shù)據(jù)的方式與傳統(tǒng)的HTML頁面相同，本文主要來和大家講講它的正確使用方法，希望對大家有所幫助2023-05-05
這篇文章主要來和大家一起深入探討下Vue中keep-alive?的作用及其使用方法,幫助開發(fā)者在實際項目中充分利用這一功能實現(xiàn)高效的組件管理2024-11-11
這篇文章主要為大家詳細(xì)介紹了基于vue、react實現(xiàn)倒計時效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-08-08
Vue0.1的過濾代碼如何添加到Vue2.0直接使用，這篇文章主要介紹了過濾代碼添加到Vue2.0用的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
vue中window.addEventListener(‘scroll‘,?xx)失效的解決
這篇文章主要介紹了vue中window.addEventListener(‘scroll‘,?xx)失效的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07