vue組件 keep-alive 和 transition 使用詳解

1.keep-alive

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

包裹動態組件時，會緩存不活動的組件實例，而不是銷毀它們。和 相似， 是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出現在父組件鏈中。

當組件在 內被切換，它的 activated 和 deactivated 這兩個生命周期鉤子函數將會被對應執行。

include: 字符串或正則表達式。只有匹配的組件會被緩存。
exclude: 字符串或正則表達式。任何匹配的組件都不會被緩存。

// 組件

export default {
 name: 'test-keep-alive',
 data () {
  return {
    includedComponents: "test-keep-alive"     //這句不能漏掉
  }
 }
}

<keep-alive include="test-keep-alive">
 <!-- 將緩存name為test-keep-alive的組件 -->
 <component></component>
</keep-alive>

<keep-alive include="a,b"> 
<!-- 將緩存name為a或者b的組件，結合動態組件使用 --> 
　　<component :is="view"></component> 
</keep-alive> 
<!-- 使用正則表達式，需使用v-bind --> 
<keep-alive :include="/a|b/"> 
　　<component :is="view"></component> 
</keep-alive>

結合router使用

這一段通常放在vue項目最外層的app.vue中 為了使所有組件都能很好的利用 這個是否需要緩存特性

//需要緩存時
<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
//不需要緩存時
<router-view v-if="!$route.meta.keepAlive"></router-view>
//兩組同時啟用，只要在路由meta元信息中 對keepAlive定義，就能自主控制是否需要緩存

//...router.js
export default new Router({
 routes: [
  {
   path: '/',
   name: 'Hello',
   component: Hello,
   meta: {
    keepAlive: false // 不需要緩存
   }
  },
  {
   path: '/page1',
   name: 'Page1',
   component: Page1,
   meta: {
    keepAlive: true // 需要被緩存
   }
  }
 ]
})

2.transition

name - string，用于自動生成 CSS 過渡類名。例如：name: ‘fade' 將自動拓展為.fade-enter，.fade-enter-active等。默認類名為 “v”

元素作為單個元素/組件的過渡效果。 只會把過渡效果應用到其包裹的內容上，而不會額外渲染 DOM 元素，也不會出現在檢測過的組件層級中。

Vue只有在插入，更新或者移除DOM元素時才會應用過渡效果。一般兩類情況一個是利用CSS過渡或者動畫，另一個是利用JavaScript鉤子函數。

!-- 首先將要過渡的元素用transition包裹，并設置過渡的name，然后添加觸發這個元素過渡的按鈕（實際項目中不一定是按鈕，任何能觸發過渡組件的DOM操作的操作都可以） -->

<div>
 <button @click="show=!show">show</button>
 <transition name="fade">
  <p v-show="show">hello</p>
 </transition>
</div>

&.fade-enter-active, &.fade-leave-active
 transition: all 0.5s ease   
&.fade-enter, &.fade-leave-active
 opacity: 0 

組件過渡過程中，會有四個CSS類名進行切換，這四個類名與上面transition的name屬性有關，比如name=“fade”，會有如下四個CSS類名：

fade-enter：進入過渡的開始狀態，元素被插入時生效，只應用一幀后立即刪除；

fade-enter-active：進入過渡的結束狀態，元素被插入時就生效，在過渡過程完成之后移除；

fade-leave：離開過渡的開始狀態，元素被刪除時觸發，只應用一幀后立即刪除；

fade-leave-active：離開過渡的結束狀態，元素被刪除時生效，離開過渡完成之后被刪除；

從上面四個類名可以看出，fade-enter-active和fade-leave-active在整個進入或離開過程中都有效，所以CSS的transition屬性在這兩個類下進行設置。

上面示例中，fade-enter和fade-leave-active類設置CSS為opacity:0，說明過渡剛進入和離開的時候透明度為0，即不顯示。當然還可以設置其他的CSS屬性

總結

以上所述是小編給大家介紹的vue組件 keep-alive 和 transition 使用詳解,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！