在vue中如何透過keep-alive優化

本篇文章主要介紹了vue專案優化之透過keep-alive資料快取的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧

7c9485ff8c3cba5ae9343ed63c2dc3f7是Vue的內建元件，能在元件切換過程中將狀態保留在記憶體中，防止重複渲染DOM。

7c9485ff8c3cba5ae9343ed63c2dc3f7 包裹動態元件時，會快取不活動的元件實例，而不是銷毀它們。和 300ff3b250bc578ac201dd5fb34a0004 相似，7c9485ff8c3cba5ae9343ed63c2dc3f7 是抽像元件：它本身不會渲染一個 DOM 元素，也不會出現在父元件鏈中。

prop:

1. include: 字串或正規表示式。只有匹配的組件會被快取。

2. 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)

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

使用JQUERY如何實作多個AJAX請求

#在NodeJs中如何使用form-data格式傳輸檔案

在微信小程式中如何實作圖片懶載入

#使用js如何實作焦點圖效果

以上是在vue中如何透過keep-alive優化的詳細內容。更多資訊請關注PHP中文網其他相關文章！