vue項目優化之通過keep-alive數據緩存的方法

<keep-alive>是Vue的內置組件，能在組件切換過程中將狀態保留在內存中，防止重復渲染DOM。

<keep-alive> 包裹動態組件時，會緩存不活動的組件實例，而不是銷毀它們。和 <transition> 相似，<keep-alive> 是一個抽象組件：它自身不會渲染一個 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)

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。