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