vue使用keep alive實現資料快取不重新整理

2021-09-17 08:41:38 字數 708 閱讀 5937

到現在,接觸vue也小段時間了,專案進行到了一定程度,然而專案缺少了快取機制,所以每次跳轉頁面都會重新created一下資料,雖說系統的資料請求速度很快,但是這樣做對系統的效能會有很大的壞處的,所以到這裡就要對系統優化下,新增快取了。

其實到現在,對於vue還是沒有玩通,每深挖一次,就會發現一次vue的精彩,開始不清楚要用什麼實現快取,找了好久,有好幾種說法,就是用vuex、vuet或者keep-alive,然後對比了一下,在我認為,vuex和vuet是實現狀態管理,重心是在資料處理上;想要實現整體的快取,阻止created的重新整理,就要用keep-alive。

所以這裡我想要給大家介紹下如何用keep-alive實現快取的頁面?其實很簡單,就是幾句話而已。

3、在router檔案加上meta判斷

import vue from 'vue'

import router from 'vue-router'

vue.use(router)

export default new router(}}

})

想要看有沒有快取成功,可以在各個元件的created鉤子裡面列印輸出標誌,快取成功就是首次進入頁面,created會請求資料,後面就不會再次請求而是直接呼叫快取的

新增了快取可以大大減少對系統效能的損壞,畢竟做資料處理型的系統,資料過於龐大,每次都要請求一下頁面是很不好的,有了快取,該快取的快取,不想快取也可以實時重新整理

vue使用keep alive快取元件

在這裡keep alive配合了router view使用,keep alive本身是vue2.0的功能,並不是vue router的,所以在vue1.0版本是不支援的。在vue路由中使用meta配合實現效果 在router檔案加上meta判斷 import vue from vue import ...

vue中keep alive的使用

1.beforecreate 2.created 3.beforemount 4.mounted 5.beforeupdate 6.updated 7.beforedestory 8.destroyed 9.errorcaptured 當捕獲乙個來自子孫元件的錯誤時被呼叫。此鉤子會收到三個引數 錯誤...

vue中keep alive的使用

keep alive 是 vue 的內建元件,當它包裹動態元件時,會快取不活動的元件例項,而不是銷毀它們。和 transition 相似,keep alive 是乙個抽象元件 它自身不會渲染成乙個 dom 元素,也不會出現在父元件鏈中。在元件切換過程中將狀態保留在記憶體中,防止重複渲染dom,減少載...