vue----keep-alive緩存，activated,deactivated兩個生命週期函數，，meta實現緩存

keep-alive緩存（ 通常都要將首次建立的組件緩存，提升性能）

將須要緩存的組件緩存在內存當中，下次再次訪問的時候，直接從緩存中讀取，而不是從新建立或者銷燬……提升了性能

（只要組件會經歷建立和銷燬(v-if v-show)的時候，均可以使用keep-alive） 　　若是沒有緩存，每點擊一次導航，內容區就會建立一個組件，該組件會經歷整個生命週期，每點擊一次，就會建立一個組件，比較浪費性能，
這時，咱們就要考慮到是否能將點擊過的已建立的組件進行緩存，當再次點擊已訪問過的組件時，這時，就會從緩存中獲取該組件，而不會從新建立，
這就用到keep-alive 用keep-alive 標籤包裹component組件標籤 <keep-alive>
       <component :is="activeCom"></component>
</keep-alive>

keep-alive對應兩個生命週期,activated(){} deactivated(){}

當從緩存中讀取a組件時，此時a組件處於活躍狀態， 當從緩存中讀取b組件時，a組件處於緩存狀態，此時b組件處於活躍狀態， 用途： eg:當在a組件瀏覽小說到某個位置，這時，我切換到b組件，那麼就用a組件的緩存狀態函數記錄這個位置（），
當我再次切換到a組件，用活躍狀態函數 保存到該位置 activated(){ console.log("活躍狀態"); }, deactivated(){ console.log("緩存狀態") }

利用include，exclude屬性緩存

include屬性表示只有name屬性爲bookLists，bookLists的組件會被緩存，
（注意是組件的名字，不是路由的名字）其它組件不會被緩存exclude屬性表示除了name屬性爲indexLists的組件不會被緩存，其它組件都會被緩存

<keep-alive include="bookLists,bookLists">
      <router-view></router-view>
</keep-alive>
<keep-alive exclude="indexLists">
      <router-view></router-view>
</keep-alive>

利用meta屬性函數

export default[ { path:'/', name:'home', components:Home,  meta:{ keepAlive:true //須要被緩存的組件  }, { path:'/book', name:'book', components:Book,  meta:{ keepAlive:false //不須要被緩存的組件  } ] <keep-alive>
  <router-view v-if="this.$route.meat.keepAlive"></router-view>
  <!--這裏是會被緩存的組件-->
</keep-alive>

<keep-alive v-if="!this.$router.meta.keepAlive"></keep-alive>
<!--這裏是不會被緩存的組件-->