示例vue 的keep-alive緩存功能的實(shí)現(xiàn)
本篇文章主要介紹了vue 的keep-alive緩存功能的實(shí)現(xiàn)，寫的十分的全面細(xì)致，具有一定的參考價(jià)值，對此有需要的朋友可以參考學(xué)習(xí)下。如有不足之處，歡迎批評指正。
<keep-alive>是Vue的內(nèi)置組件，能在組件切換過程中將狀態(tài)保留在內(nèi)存中，防止重復(fù)渲染DOM。
<keep-alive> 包裹動態(tài)組件時(shí)，會緩存不活動的組件實(shí)例，而不是銷毀它們。和 <transition> 相似，<keep-alive> 是一個(gè)抽象組件：它自身不會渲染一個(gè) DOM 元素，也不會出現(xiàn)在父組件鏈中。
prop:
- include: 字符串或正則表達(dá)式。只有匹配的組件會被緩存。
- exclude: 字符串或正則表達(dá)式。任何匹配的組件都不會被緩存。
Vue 實(shí)現(xiàn)組件信息的緩存
當(dāng)我們在開發(fā)vue的項(xiàng)目過程中，避免不了在路由切換到其他的component再返回后該組件數(shù)據(jù)會重新加載，處理這種情況我們就需要用到keep-alive來緩存vue的組件信息，使其不再重新加載。
一、在app.vue里
<keep-alive> <router-view></router-view> </keep-alive>
但是這種情況會對所有的組件進(jìn)行緩存，不能達(dá)到單個(gè)組件緩存的效果。
那么我們給部分組件加上，實(shí)現(xiàn)方法如下：
在app.vue
<!--這里是需要keepalive的--> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> <keep-alive> <!-- 這里不會被keepAlive --> <router-view v-if="!$route.meta.keepAlive"></router-view>
二、 在路由的index.js頁面里
{
path: '',
name: '',
component: '',
meta: {keepAlive: true} // 這個(gè)是需要keepalive的
}，
{
path: '',
name: '',
component: ,
meta: {keepAlive: false} // 這是不會被keepalive的
}
這就實(shí)現(xiàn)了部分組件的緩存功能
如果緩存的組件想要清空數(shù)據(jù)或者執(zhí)行初始化方法，在加載組件的時(shí)候調(diào)用activated鉤子函數(shù)，如下：
activated: function () {
this.data = ‘'
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue3項(xiàng)目中使用防抖節(jié)流的實(shí)現(xiàn)示例
防抖節(jié)流是可以說是一種優(yōu)化組件性能的技巧,可以有效減少組件中的渲染次數(shù)和計(jì)算量,本文主要介紹了Vue3項(xiàng)目中使用防抖節(jié)流的實(shí)現(xiàn)示例,感興趣的可以了解一下2024-04-04
在vue項(xiàng)目中,和后臺交互獲取數(shù)據(jù)這塊,我們通常使用的是axios庫,它是基于promise的http庫,下面這篇文章主要給大家介紹了關(guān)于Vue3引入axios封裝接口的兩種方法,需要的朋友可以參考下2022-10-10
Vue記住滾動條和實(shí)現(xiàn)下拉加載的完美方法
這篇文章主要給大家介紹了關(guān)于Vue記住滾動條和實(shí)現(xiàn)下拉加載的完美方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要介紹了vue路由傳參 router-link和編程式傳參方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)多級菜單效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10
基于vue 實(shí)現(xiàn)表單中password輸入的顯示與隱藏功能
這篇文章主要介紹了vue 實(shí)現(xiàn)表單中password輸入的顯示與隱藏功能 ,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-07-07
今天小編就為大家分享一篇vue2.0獲取鼠標(biāo)位置的方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vuejs 用$emit與$on來進(jìn)行兄弟組件之間的數(shù)據(jù)傳輸通信
本篇文章主要介紹了Vuejs 用$emit 與 $on 來進(jìn)行兄弟組件之間的數(shù)據(jù)傳輸示例，非常具有實(shí)用價(jià)值，需要的朋友可以參考下。2017-02-02
Vue3實(shí)現(xiàn)表單輸入的雙向綁定的示例代碼
Vue.js 是一個(gè)漸進(jìn)式的JavaScript框架,廣泛用于構(gòu)建交互式用戶界面,在 Vue 中,雙向綁定是一項(xiàng)非常核心的概念,尤其是在處理表單輸入時(shí),它使得數(shù)據(jù)和用戶界面之間的互動變得簡單又高效,在本篇博客中,我們將深入探討如何在 Vue 3 中實(shí)現(xiàn)表單輸入的雙向綁定2025-01-01
vue & vue Cli 版本及對應(yīng)關(guān)系解讀
這篇文章主要介紹了vue & vue Cli 版本及對應(yīng)關(guān)系，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07