Vue3-KeepAlive,多個(gè)頁面使用keepalive方式
Vue3-KeepAlive,多個(gè)頁面使用keepalive
Vue3的生命周期
未添加keepAlive的生命周期
beforeCreate=>created=>beforeMount=>mounted=>beforeUpdate=>updated=>beforeUnmount=>unmounted
添加keepAlive的生命周期
activated：當(dāng)keepalive包含的組件渲染的時(shí)候觸發(fā)deactived：當(dāng)keepalive包含的組件銷毀的時(shí)候觸發(fā)keep-alive的生命周期activated： 頁面第一次進(jìn)入的時(shí)候，鉤子觸發(fā)的順序是created->mounted->activateddeactivated: 頁面退出的時(shí)候會(huì)觸發(fā)deactivated
當(dāng)再次前進(jìn)或者后退的時(shí)候只觸發(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寫法，會(huì)有警告 -->
<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屬性，通常多個(gè)頁面會(huì)使用到keepAlive屬性，如果是多個(gè)頁面，那么必須加上:key屬性，否則會(huì)報(bào)錯(cuò)。
效果圖（首頁及mv頁不會(huì)重新加載）
Vue2和Vue3的keep-alive用法
vue3的keep-alive用法和vue2用法是不同的。
vue2 keep-alive
keep-alive概念：
keep-alive是Vue的內(nèi)置組件，當(dāng)它包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例，而不是銷毀。
keep-alive作用：
用來緩存組件，避免多次加載相同的組件，減少性能消耗，提高用戶體驗(yàn)。
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 的組件,如果有多個(gè)，可用逗號(hào)分
<keep-alive include='cc，cc1,cc2'>
<router-view/>
</keep-alive>
// 2. 將不緩存 name 為 cc 的組件
<keep-alive exclude='cc'>
<router-view/>
</keep-alive>
// 3. 還可使用屬性綁定動(dòng)態(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 表示頁面不會(huì)被銷毀，即保持頁面狀態(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)到詳情頁面的情況，保證上一級(jí)頁面的頁面數(shù)據(jù)不會(huì)刷新，例如兩個(gè)頁面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, // 組件需要緩存
}
},
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue中input標(biāo)簽上傳本地文件或圖片后獲取完整路徑的解決方法
本文給大家介紹vue中input標(biāo)簽上傳本地文件或圖片后獲取完整路徑，如E:\medicineOfCH\stageImage\xxx.jpg，本文給大家分享完美解決方案，感興趣的朋友跟隨小編一起看看吧2023-04-04
在當(dāng)今前端開發(fā)的領(lǐng)域中,Vue 框架因其高效和靈活的特性備受開發(fā)者青睞,而 Vant 是一個(gè)輕量的移動(dòng)端組件庫,為 Vue 應(yīng)用的開發(fā)提供了豐富且便捷的功能組件,本文將就如何在 Vue 框架中通過 Vant 來實(shí)現(xiàn)日期選擇器的使用,需要的朋友可以參考下2024-08-08
這篇文章主要介紹了vue請求函數(shù)和路由的安裝使用過程,本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-08-08
這篇文章主要介紹了8個(gè)非常實(shí)用的Vue自定義指令，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
Electron也可以快速地將你的網(wǎng)站打包成一個(gè)原生應(yīng)用發(fā)布,下面這篇文章主要給大家介紹了關(guān)于Vue和React中快速使用Electron的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
這篇Vue3開發(fā)文檔，包含了 Vue3 開發(fā)中使用的所有語法，文中的示例代碼講解詳細(xì)，希望所有像他一樣還不熟的伙伴快速上手 Vue3，不會(huì)的再不看要遭老罪咯2023-04-04
這篇文章主要介紹了nuxt.js 緩存實(shí)踐，nuxt 的緩存可以分為 組件級(jí)別緩存 , API級(jí)別緩存 以及 頁面級(jí)別緩存，本文就詳細(xì)的介紹了這三種緩存，感興趣的小伙伴們可以參考一下2018-06-06
VUE項(xiàng)目實(shí)現(xiàn)全屏顯示功能之screenfull用法
這篇文章主要介紹了VUE項(xiàng)目實(shí)現(xiàn)全屏顯示功能之screenfull用法,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要介紹了vue查找指令和模板,基本思路是需要判斷當(dāng)前遍歷到的節(jié)點(diǎn)是一個(gè)元素還是一個(gè)文本，隨著思路的展開我們就來實(shí)現(xiàn)這個(gè)功能，需要的朋友可以參考下2023-10-10
這篇文章主要介紹了配置一個(gè)vue3.0項(xiàng)目的完整步驟，從0開始配置一個(gè)vue項(xiàng)目，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04