vue的專案優化之透過keep-alive資料快取的方法

本篇文章主要介紹了vue專案優化之透過keep-alive資料快取的方法，內容挺不錯的，現在分享給大家，也給大家做個參考。

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

包裹動態元件時，會快取不活動的元件實例，而不是銷毀它們。和 相似， 是抽像元件：它本身不會渲染一個 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表示不需要缓存                    }
     ]

router設定如下：

##

<keep-alive include="a,b">
<component></component>
</keep-alive>   
<keep-alive exclude="c,d">
<component></component>
</keep-alive>

router設定如下：

##rrreee

router設定如下：

##rrreee

也可以透過新增的屬性include/exclude來設定。見名思意，include包含的意思，exclude除了的意思。這裡需要用到元件的名稱即name來進行設置，所以name肯定就要加上了。  加入 a,b元件需要緩存，c,d元件不需要快取。寫法如下：

rrreee

vue專案的最佳化也可以透過元件的按需載入來實現，就像圖片的懶載入一樣，如果客戶根本就沒有看到那些圖片，而我們卻在打開頁面的時候全部給加載完了，這樣會大大的增加請求的時間，降低用戶的體驗程度。懶加載在很多的網站都有用到，比如淘寶、京東等等這樣的購物網站，上面的圖片鏈接等等都很多，如果你把滾軸迅速的往下拉的時候，你可能會看到圖片加載的情況。具體怎麼使用，大家可以看另一篇文章: vue專案優化頁面的按需載入(vue webpack)

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！ 相關推薦：

Vue元件選項props的使用介紹

#Vue.js通用應用框架-Nuxt.js的解析###############關於vue.js簡單配置axios的方法介紹###################### ####

以上是vue的專案優化之透過keep-alive資料快取的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！