vue前端開發(fā)keepAlive使用詳解
前言
keep-alive 是 Vue 的內(nèi)置組件,當(dāng)它包裹動態(tài)組件時,會緩存不活動的組件實(shí)例,而不是銷毀它們。
在組件切換過程中將狀態(tài)保留在內(nèi)存中,防止重復(fù)渲染DOM,減少加載時間及性能消耗,提高用戶體驗(yàn)性。使用方式為
<keep-alive> <component /> </keep-alive>
這里的component會被緩存。
keep-avlive鉤子函數(shù)
被包含在 keep-alive 中創(chuàng)建的組件,會多出兩個生命周期的鉤子: activated與deactivated。activated:在 keep-alive 組件激活時調(diào)用,keep-alive 會將數(shù)據(jù)保留在內(nèi)存中,如果要在每次進(jìn)入頁面的時候獲取最新的數(shù)據(jù),需要在 activated 階段獲取數(shù)據(jù),承擔(dān)原來 created 鉤子函數(shù)中獲取數(shù)據(jù)的任務(wù)
deactivated:在 keep-alive 組件停用時調(diào)用,使用了keep-alive就不會調(diào)用beforeDestory和destoryed鉤子,因?yàn)榻M件沒有被銷毀,而是被緩存起來了,所以deactivated鉤子可以看做是beforeDestory和destoryed的替代,如清空localStorge數(shù)據(jù)等。
keep-avlive緩存哪些組件
keep-avlive緩存哪些組件通過兩種方式,一種是通過keep-avlive組件提供的include、exclude屬性通過參數(shù)進(jìn)行匹配對應(yīng)的組件進(jìn)行緩存,另一種通過route中meta屬性的設(shè)置。
使用include、exclude屬性完成緩存組件設(shè)置
/*將緩存 name 為 test 的組件*/ <keep-alive include='test'> <router-view/> </keep-alive>
使用include是將緩存name為test的組件。
<keep-alive exclude="test"> <router-view/> </keep-alive>
使用exclude,將不緩存name為test的組件。
使用route中meta屬性的設(shè)置緩存組件,如
export default new Router({ mode: 'history', routes: [ { path: '/', name: 'home', component: Home, redirect: 'goods', children: [ { path: 'goods', name: 'goods', component: Goods, meta: { keepAlive: false // 不需要緩存 } }, { path: 'ratings', name: 'ratings', component: Ratings, meta: { keepAlive: true // 需要緩存 } } ] } ] })
goods組件需要緩存,ratings不需要緩存。在使用 到中使用以下語句動態(tài)完成組件緩存設(shè)置,設(shè)置代碼如下
<template> <div id="app"> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> </div> </template>
示例
設(shè)置兩個組件KeepCom1,KeepCom2,KeepCom1設(shè)置緩存,KeepCom2不設(shè)置緩存。同時測試兩個鉤子函數(shù)的使用,這里使用路由meta實(shí)現(xiàn)緩存組件的設(shè)置。
KeepCom1代碼如下:
<template> <div class="wrapper"> <ul class="content"></ul> <button class="add" id="add" @click="add">添加子元素</button> </div> </template> <script> export default { name: 'keepCom1', methods: { add () { let ul = document.getElementsByClassName('content')[0] let li = document.createElement('li') li.innerHTML = '我是添加的元素' ul.appendChild(li) } }, activated () { console.log('緩存activated執(zhí)行') }, deactivated () { console.log('緩存deactivated執(zhí)行') } } </script> <style> </style>
KeepCom2代碼如下:
<template> <div class="wrapper"> <ul class="content"></ul> <button class="add" id="add" @click="add">添加子元素</button> </div> </template> <script> export default { name: 'keepCom2', methods: { add () { let ul = document.getElementsByClassName('content')[0] let li = document.createElement('li') li.innerHTML = '我是添加的元素' ul.appendChild(li) } }, activated () { console.log('緩存activated執(zhí)行') }, deactivated () { console.log('緩存deactivated執(zhí)行') } } </script> <style> </style>
KeepCom1和KeepCom2代碼基本一致,就是給頁面增加結(jié)點(diǎn)。
keepAvliveTest代碼如下
<template> <div align="center" style="margin-top: 20px;"> <router-link to="/keepAvliveTest/keepcom1">使用緩存</router-link> <router-link to="/keepAvliveTest/keepcom2">不使用緩存</router-link> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> </div> </template> <script> export default { name: 'keepAvliveTest' } </script> <style> </style>
完成keepcom1和keepcom2組件切換,執(zhí)行后的結(jié)果為
keepcom1使用緩存,切換頁面時,上次添加三個元素還在,而且鉤子函數(shù)得到執(zhí)行。keepcom2沒有使用緩存,切換頁面時,上次添加一個元素不存在了,恢復(fù)到初始狀態(tài)。而且兩個鉤子沒有得到執(zhí)行。
小結(jié)及注意事項(xiàng)
在設(shè)置需要緩存的頁面時,推薦使用router中meta標(biāo)簽,這樣代碼的耦合度較低。keep-alive 先匹配被包含組件的 name 字段,如果 name 不可用,則匹配當(dāng)前組件 components 配置中的注冊名稱。包含在 keep-alive 中,但符合 exclude ,不會調(diào)用activated和 deactivated
以上就是vue前端開發(fā)keepAlive使用詳解的詳細(xì)內(nèi)容,更多關(guān)于vue前端的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue-seamless-scroll無縫滾動組件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了vue-seamless-scroll無縫滾動組件的使用方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-04-04vue3中require報(bào)錯require is not defined問題及解決
這篇文章主要介紹了vue3中require報(bào)錯require is not defined問題及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-06-06vue3?element?plus按需引入最優(yōu)雅的用法實(shí)例
這篇文章主要給大家介紹了關(guān)于vue3?element?plus按需引入最優(yōu)雅的用法,以及關(guān)于Element-plus按需引入的一些坑,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03Vue2.0使用過程常見的一些問題總結(jié)學(xué)習(xí)
本篇文章主要介紹了Vue2.0使用過程常見的一些問題總結(jié)學(xué)習(xí),詳細(xì)的介紹了使用中會遇到的各種錯誤,有興趣的可以了解一下。2017-04-04Vue詳細(xì)講解Vuex狀態(tài)管理的實(shí)現(xiàn)
這篇文章主要介紹了Vuex狀態(tài)管理器的使用,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08vue中v-for循環(huán)給標(biāo)簽屬性賦值的方法
這篇文章主要介紹了vue中v-for循環(huán)給標(biāo)簽屬性賦值的方法,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-10-10vant組件中 dialog的確認(rèn)按鈕的回調(diào)事件操作
這篇文章主要介紹了vant組件中 dialog的確認(rèn)按鈕的回調(diào)事件操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11Vue技巧Element Table二次封裝實(shí)戰(zhàn)示例
這篇文章主要為大家介紹了Vue技巧Element Table二次封裝實(shí)戰(zhàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11