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>
<!--這里是不會被緩存的組件-->