vue keep-alive中的生命周期解讀

更新時間：2023年10月21日 14:27:44 作者：nilmao

這篇文章主要介紹了vue keep-alive中的生命周期,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

vue keep-alive生命周期

keep-alive是 Vue 提供的一個內(nèi)置組件，用來對組件進(jìn)行緩存——在組件切換過程中將狀態(tài)保留在內(nèi)存中，防止重復(fù)渲染DOM。

如果為一個組件包裹了 keep-alive，那么它會多出兩個生命周期：deactivated、activated。

同時，beforeDestroy 和 destroyed 就不會再被觸發(fā)了，因為組件不會被真正銷毀。

當(dāng)引入keep-alive的時候，頁面第一次進(jìn)入，鉤子的觸發(fā)順序created-> mounted-> activated，退出時觸發(fā)deactivated。

當(dāng)再次進(jìn)入（前進(jìn)或者后退）時，只觸發(fā)activated。

被keep-alive包裹的動態(tài)組件或router-view會緩存不活動的實例，再次被調(diào)用這些被緩存的實例會被再次復(fù)用，對于我們的某些不是需要實時更新的頁面來說大大減少了性能上的消耗，不需要再次發(fā)送HTTP請求，但是同樣也存在一個問題就是被keep-alive包裹的組件我們請求獲取的數(shù)據(jù)不會再重新渲染頁面，這也就出現(xiàn)了例如我們使用動態(tài)路由做匹配的話頁面只會保持第一次請求數(shù)據(jù)的渲染結(jié)果，所以需要我們在特定的情況下強制刷新某些組件

1.利用include、exclude屬性

<keep-alive include="orderList">
      <router-view></router-view>
</keep-alive>
<keep-alive exclude="index">
      <router-view></router-view>
</keep-alive>

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

2.利用meta屬性

export default[
 {
  path:'/',
  name:'home',
  components:Home,
  meta:{
    keepAlive:true //需要被緩存的組件
 },
 {
  path:'/orderList',
  name:'orderList',
  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>
<!--這里是不會被緩存的組件-->