下面看下通過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項目的優化還可以通過組件的按需加載來實現，就像圖片的懶加載一樣，如果客戶根本就沒有看到那些圖片，而我們卻在打開頁面的時候全部給加載完了，這樣會大大的增加請求的時間，降低用戶的體驗程度。懶加載在很多的網站都有用到，比如淘寶、京東等等這樣的購物網站，上面的圖片鏈接等等都很多，如果你把滾軸迅速的往下拉的時候，你可能會看到圖片加載的情況。