vue?Keep-alive組件緩存的簡單使用代碼
Props：
include - 字符串或正則表達式。只有名稱匹配的組件會被緩存。
exclude - 字符串或正則表達式。任何名稱匹配的組件都不會被緩存。
max - 數(shù)字。最多可以緩存多少組件實例。
用法：
keep-alive包裹動態(tài)組件時，會緩存不活動的組件實例，而不是銷毀它們。和 <transition> 相似，<keep-alive> 是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出現(xiàn)在組件的父組件鏈中。當組件在 <keep-alive> 內被切換，它的 activated 和 deactivated 這兩個生命周期鉤子函數(shù)將會被對應執(zhí)行。
被包含在 keep-alive 中創(chuàng)建的組件，會多出兩個生命周期的鉤子: activated 與 deactivated。
activated：在 keep-alive 組件激活時調用，該鉤子函數(shù)在服務器端渲染期間不被調用。
deactivated：在 keep-alive 組件停用時調用，該鉤子在服務器端渲染期間不被調用。
使用 keep-alive 會將數(shù)據(jù)保留在內存中，如果要在每次進入頁面的時候獲取最新的數(shù)據(jù)，需要在 activated 階段獲取數(shù)據(jù)，承擔原來 created 鉤子函數(shù)中獲取數(shù)據(jù)的任務。
一、基本用法
<template>
<div>
<div>
<button @click="flag='testA'">A組件</button>
<button @click="flag='testB'">B組件</button>
<component :is="flag"></component>
</div>
</div>
</template>
<script>
import testA from './testA';
export default {
data(){
return{
flag:'testA'
}
},
methods:{
},
components:{
testA,
'testB': () => import('./testB')
}
}
</script>keep-alive主要用于保留組件狀態(tài)或避免重新渲染。比如在動態(tài)組件中，為組件A和組件B分別設置了隨機數(shù)編號，若在切換組件后又顯示新的隨機數(shù)體驗極差，因此要用到keep-alive，下面聊聊keep-alive的各種用法。
App.vue：
//第一種：直接在組件外面套keep-alive 組件A和組件B內容都會被緩存
<keep-alive>
<component :is="flag"></component>
</keep-alive>
//第二種：include 此時只有組件A內容會被緩存 若有多個可用逗號分隔include="testA，testB"
<keep-alive include="testA">
<component :is="flag"></component>
</keep-alive>
//第三種：include+正則表達式或者數(shù)組 這種情況必須用v-bind (:include="")
<keep-alive :include="['testA']">
<component :is="flag"></component>
</keep-alive>
//第四種：exclude 此時組件A內容不會被緩存，組件B內容會被緩存
<keep-alive exclude="testA">
<component :is="flag"></component>
</keep-alive>
//特殊情況：若include和exclude同時出現(xiàn) exclude的優(yōu)先級是高于include的此時只緩存組件B
<keep-alive include="testA,testB" exclude="testA">
<component :is="flag"></component>
</keep-alive> 二、結合Router使用
默認情況下在點擊標題幾后跳轉到別的組件再回到Tab切換組件后仍是展示默認的內容1，此時可以結合router來緩存其內容達到上圖的效果。
首先在router中為路由頁面添加meta屬性：
{
path: '/tab',
name: 'tab',
meta:{
keepAlive:true //需要緩存
},
component: () => import('../views/Tab.vue')
},
{
path: '/banner',
name: 'banner',
meta:{
keepAlive:false //不需要緩存
},
component: () => import('../views/Banner.vue')
}然后在App.vue中添加判斷：
//此處是為添加了keepAlive=true 的路由添加緩存
<keep-alive>
<router-view v-if="$route.meta.keepAlive"/>
</keep-alive>
//此處是為添加了keepAlive=false 的路由默認不緩存
<router-view v-if="!$route.meta.keepAlive"/> 注：本文演示所用案例來自金渡教育課件
總結
到此這篇關于vue Keep-alive組件緩存簡單使用的文章就介紹到這了,更多相關vue Keep-alive組件緩存使用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
組件是Vue.js的最核心的功能,所謂的組件化就是把頁面拆分成多個組件,每個組件單獨使用CSS,JS,模板,圖片等資源進行開發(fā)與維護,然后在制作網(wǎng)頁的時候根據(jù)需要調用相關的組件,這篇文章主要給大家介紹了關于vue.js全局組件和局部組件的相關資料,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue router 跳轉時打開新頁面的示例方法，本文通過示例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07
這篇文章主要為大家詳細介紹了Vue實現(xiàn)響應式布局的兩種方法,文中的示例代碼講解詳細,具有一定的學習價值,感興趣的小伙伴可以跟隨小編一起了解一下2023-12-12
前端記錄輸入框的歷史輸入記錄實現(xiàn)步驟(輸入框數(shù)據(jù)記憶功能)
這篇文章主要介紹了如何使用localStorage來記錄每個輸入框的歷史輸入記錄,并在用戶輸入時動態(tài)更新這些記錄,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-03-03
本文主要介紹了Vue.js實現(xiàn)對視頻預覽的示例代碼,通過監(jiān)聽文件選擇事件和使用FileReader API,可以實現(xiàn)視頻文件的預覽功能,感興趣的可以了解一下2025-01-01
利用Vue3+Element-plus實現(xiàn)大文件分片上傳組件
在開發(fā)中如果上傳的文件過大,可以考慮分片上傳,分片就是說將文件拆分來進行上傳,將各個文件的切片傳遞給后臺,然后后臺再進行合并,下面這篇文章主要給大家介紹了關于利用Vue3+Element-plus實現(xiàn)大文件分片上傳組件的相關資料,需要的朋友可以參考下2023-01-01
本文主要介紹了在vue3中使用jsx的配置以及一些小問題，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
在new Vue的配置參數(shù)中的computed和methods都可以處理大量的邏輯代碼，但是什么時候用哪個屬性，要好好區(qū)分一下才能做到正確的運用vue。這篇文章主要介紹了Vue中method與computed的區(qū)別,需要的朋友可以參考下2018-03-03
這篇文章主要介紹了React和Vue中監(jiān)聽變量變化的方法,本文通過一個場景，父組件傳遞子組件一個A參數(shù)，子組件需要監(jiān)聽A參數(shù)的變化轉換為state，具體內容詳情大家跟隨小編一起通過本文學習吧2018-11-11
基于vue開發(fā)微信小程序mpvue-docs跳轉頁面功能
這篇文章主要介紹了基于vue寫微信小程序mpvue-docs跳轉頁面，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04