本篇文章主要介紹了vue專案優化之透過keep-alive資料快取的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧
prop:
include: 字串或正規表示式。只有匹配的組件會被快取。
exclude: 字串或正規表示式。任何符合的元件都不會被快取。
透過vue提供的keep-alive減少對伺服器的請求次數
VUE2.0提供了一個keep-alive方法，可以用來快取元件，避免多次加載相應的組件，減少效能的消耗。例如， 一個頁面的資料包括圖片、文字等使用者都已經載入完了，然後使用者透過點擊跳到了另一個介面。然後從另外一個介面通過返回又回到了原先的界面。如果沒有設定的話，那麼原先介面的資訊就要重新向伺服器要求得到。而透過vue提供的keep-alive可以是頁面的已經請求的資料得以保存，減少請求的次數，提高使用者的體驗程度。
快取元件又分為兩種，快取整個網站的頁面的元件或快取部分頁面的元件。
1、快取所有的頁面,適用於每個頁面都有請求的情況。方法如下，在需要快取的router-view用keep-alive標籤進行包裹起來。
<keep-alive> <router-view></router-view> </keep-alive>
將首次觸發請求寫到created鉤子裡邊，就能實現快取。例如從列表頁，去了詳情頁，回來還是原來的頁面。
2、快取部分元件或頁面，使用router.meta這個屬性透過判斷的方法可以實現。方法如下：
<keep-alive v-if="$route.meta.keepAlive"> <router-view></router-view> </keep-alive> <router-view v-if="! $route.meta.keepAlive"> </router-view>
router設定如下：
routers:[
{ path: '/home',
name: home,
meta:{keepAlive: true} // 设置为true表示需要缓存，不设置或者false表示不需要缓存 }
]也可透過新增的屬性include/exclude設定。見名思意，include包含的意思，exclude除了的意思。這裡需要用到元件的名稱即name來進行設置，所以name肯定就要加上了。 加入 a,b元件需要緩存，c,d元件不需要快取。寫法如下：
<keep-alive include="a,b"> <component></component> </keep-alive> <keep-alive exclude="c,d"> <component></component> </keep-alive>
vue專案的最佳化還可以透過元件的按需載入來實現，就像圖片的懶加載一樣，如果客戶根本就沒有看到那些圖片，而我們卻在開啟頁面的時候全部給加載完了，這樣會大大的增加請求的時間，降低用戶的體驗程度。懶加載在很多的網站都有用到，比如淘寶、京東等等這樣的購物網站，上面的圖片鏈接等等都很多，如果你把滾軸迅速的往下拉的時候，你可能會看到圖片加載的情況。具體怎麼使用，大家可以看另一篇文章: vue專案優化之頁的按需載入(vue webpack)
上面是我整理給大家的，希望今後會對大家有幫助。
相關文章：
以上是在vue中如何透過keep-alive優化的詳細內容。更多資訊請關注PHP中文網其他相關文章！
