示例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> 包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例，而不是銷毀它們。和 <transition> 相似，<keep-alive> 是一個(gè)抽象組件：它自身不會(huì)渲染一個(gè) DOM 元素，也不會(huì)出現(xiàn)在父組件鏈中。
prop:
- include: 字符串或正則表達(dá)式。只有匹配的組件會(huì)被緩存。
- exclude: 字符串或正則表達(dá)式。任何匹配的組件都不會(huì)被緩存。
Vue 實(shí)現(xiàn)組件信息的緩存
當(dāng)我們在開發(fā)vue的項(xiàng)目過程中，避免不了在路由切換到其他的component再返回后該組件數(shù)據(jù)會(huì)重新加載，處理這種情況我們就需要用到keep-alive來緩存vue的組件信息，使其不再重新加載。
一、在app.vue里
<keep-alive> <router-view></router-view> </keep-alive>
但是這種情況會(huì)對所有的組件進(jìn)行緩存，不能達(dá)到單個(gè)組件緩存的效果。
那么我們給部分組件加上，實(shí)現(xiàn)方法如下：
在app.vue
<!--這里是需要keepalive的--> <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> <keep-alive> <!-- 這里不會(huì)被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} // 這是不會(huì)被keepalive的
}
這就實(shí)現(xiàn)了部分組件的緩存功能
如果緩存的組件想要清空數(shù)據(jù)或者執(zhí)行初始化方法，在加載組件的時(shí)候調(diào)用activated鉤子函數(shù)，如下：
activated: function () {
this.data = ‘'
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了Vue.js父與子組件之間傳參示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要介紹了vue關(guān)于頁面刷新的幾個(gè)方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue實(shí)戰(zhàn)之vue登錄驗(yàn)證的實(shí)現(xiàn)代碼
本篇文章主要介紹了Vue實(shí)戰(zhàn)之vue登錄的實(shí)現(xiàn)代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
查看當(dāng)前vue項(xiàng)目所需Node.js版本的方法
這篇文章主要大家介紹了查看當(dāng)前vue項(xiàng)目所需Node.js版本的方法,文章通過代碼示例給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了vue 命名視圖的相關(guān)知識，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08
Vue.js圖片滑動(dòng)驗(yàn)證的實(shí)現(xiàn)示例
為了防止有人惡意使用腳本進(jìn)行批量操作,會(huì)設(shè)置圖片滑動(dòng)驗(yàn)證，本文就介紹了Vue.js圖片滑動(dòng)驗(yàn)證的實(shí)現(xiàn)示例，感興趣的可以了解一下2023-05-05
vue 實(shí)現(xiàn)click同時(shí)傳入事件對象和自定義參數(shù)
這篇文章主要介紹了vue 實(shí)現(xiàn)click同時(shí)傳入事件對象和自定義參數(shù)，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2021-01-01
在本篇文章里小編給大家分享了關(guān)于vue組件中使用路由的詳細(xì)步驟內(nèi)容，有需要的朋友們跟著學(xué)習(xí)下。2019-02-02
這篇文章主要給大家介紹了關(guān)于vue中適配px2rem的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
vue 使用axios 數(shù)據(jù)請求第三方插件的使用教程詳解
這篇文章主要介紹了vue 使用axios 數(shù)據(jù)請求第三方插件的使用 ,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-07-07