Vue.js的keep-alive用法

　　一、問題提出

　　在我們用Vue.js做移動端開發的時候，經常會遇到這樣的應用場景：

　　首先，讓用戶看到新聞列表；然后點擊新聞標題，切換到新聞詳情的組件，以展示新聞詳情。

　　很多應用場景都於此類似，比如先進入商品列表，點擊某一個商品條目，則切換到商品詳情的組件。

　　這種場景往往會碰到一個問題，當我每一次從詳情組件退回到列表組件的時候，列表組件會重新發出ajax請求。考慮到下面2條原因，總覺得這么不好。

　　1.列表組件上的數據不會在短短幾分鍾之內就更新，完全沒必要每次都發出ajax請求。這樣勢必降低用戶體驗

　　2.浪費移動設備的流量。（如果流量無限，這條可以無視）

　　總之，即使只有第1條原因，我們也應該不讓它每次退回到列表頁的時候都重新發出ajax請求。

　　如何解決這個問題？

　　可以使用Vue.js自帶的keep-alive

　　二、keep-alive用法

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

　　它使用的時候非常簡單，示例代碼如下：　　

 <keep-alive>
    <router-view></router-view>
    <!--這里是會被緩存的組件-->
</keep-alive>

　　這里需要說明的是，本示例是使用了vue-router的，所以這里的keep-alive中放了1個router-view。

　　這是最簡單的用法。這樣會使所有在vue-router中渲染的組件，全部都將狀態保留在內存。

　　如果你只想緩存部分組件的狀態。那么可以使用keep-alive的include屬性。

　　例如，我們有組件newsList和newsInfo，imageList和imageInfo，但是我們只想緩存newsList和imageList這2個列表組件的數據。那么可以這么使用　　

 <keep-alive include="newsList,imageList">
    <router-view></router-view>
</keep-alive>

　　然后還有一步，你必須在需要被緩存狀態的組件的script部分，給組件添加一個name屬性。例如：

　　以newsList.vue組件為例　　

<template>
    <!-- 這里是newslist組件的html結構部分 -->
</template>
<script>
export default {
    name: "newsList",  //如果使用了keep-alive緩存該組件狀態，則此組件必須有這個屬性。
    data(){
        return {}
    }
</script>

　　需要說明的是，如果沒有使用keep-alive緩存狀態的組件，可以不寫這個屬性。但是如果使用了keep-alive緩存該組件狀態，則此組件必須有這個屬性。並且，這個屬性的值，還必須跟<keep-alive>標簽中include屬性的值完全一致，包括大小寫。