快捷導(dǎo)航

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

更新時(shí)間：2019年10月11日 09:25:29 作者：℡鞋子～特大號(hào)

這篇文章主要介紹了vue組件 keep-alive 和 transition 使用詳解,需要的朋友可以參考下

1.keep-alive

能在組件切換過(guò)程中將狀態(tài)保留在內(nèi)存中，防止重復(fù)渲染DOM。

包裹動(dòng)態(tài)組件時(shí)，會(huì)緩存不活動(dòng)的組件實(shí)例，而不是銷毀它們。和相似，是一個(gè)抽象組件：它自身不會(huì)渲染一個(gè) DOM 元素，也不會(huì)出現(xiàn)在父組件鏈中。

當(dāng)組件在內(nèi)被切換，它的 activated 和 deactivated 這兩個(gè)生命周期鉤子函數(shù)將會(huì)被對(duì)應(yīng)執(zhí)行。

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

// 組件

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的組件，結(jié)合動(dòng)態(tài)組件使用 --> 
　　<component :is="view"></component> 
</keep-alive> 
<!-- 使用正則表達(dá)式，需使用v-bind --> 
<keep-alive :include="/a|b/"> 
　　<component :is="view"></component> 
</keep-alive>

結(jié)合router使用

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

//需要緩存時(shí)
<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
//不需要緩存時(shí)
<router-view v-if="!$route.meta.keepAlive"></router-view>
//兩組同時(shí)啟用，只要在路由meta元信息中 對(duì)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，用于自動(dòng)生成 CSS 過(guò)渡類名。例如：name: ‘fade' 將自動(dòng)拓展為.fade-enter，.fade-enter-active等。默認(rèn)類名為 “v”

元素作為單個(gè)元素/組件的過(guò)渡效果。只會(huì)把過(guò)渡效果應(yīng)用到其包裹的內(nèi)容上，而不會(huì)額外渲染 DOM 元素，也不會(huì)出現(xiàn)在檢測(cè)過(guò)的組件層級(jí)中。

Vue只有在插入，更新或者移除DOM元素時(shí)才會(huì)應(yīng)用過(guò)渡效果。一般兩類情況一個(gè)是利用CSS過(guò)渡或者動(dòng)畫，另一個(gè)是利用JavaScript鉤子函數(shù)。

!-- 首先將要過(guò)渡的元素用transition包裹，并設(shè)置過(guò)渡的name，然后添加觸發(fā)這個(gè)元素過(guò)渡的按鈕（實(shí)際項(xiàng)目中不一定是按鈕，任何能觸發(fā)過(guò)渡組件的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

組件過(guò)渡過(guò)程中，會(huì)有四個(gè)CSS類名進(jìn)行切換，這四個(gè)類名與上面transition的name屬性有關(guān)，比如name=“fade”，會(huì)有如下四個(gè)CSS類名：

fade-enter：進(jìn)入過(guò)渡的開(kāi)始狀態(tài)，元素被插入時(shí)生效，只應(yīng)用一幀后立即刪除；

fade-enter-active：進(jìn)入過(guò)渡的結(jié)束狀態(tài)，元素被插入時(shí)就生效，在過(guò)渡過(guò)程完成之后移除；

fade-leave：離開(kāi)過(guò)渡的開(kāi)始狀態(tài)，元素被刪除時(shí)觸發(fā)，只應(yīng)用一幀后立即刪除；

fade-leave-active：離開(kāi)過(guò)渡的結(jié)束狀態(tài)，元素被刪除時(shí)生效，離開(kāi)過(guò)渡完成之后被刪除；

從上面四個(gè)類名可以看出，fade-enter-active和fade-leave-active在整個(gè)進(jìn)入或離開(kāi)過(guò)程中都有效，所以CSS的transition屬性在這兩個(gè)類下進(jìn)行設(shè)置。

上面示例中，fade-enter和fade-leave-active類設(shè)置CSS為opacity:0，說(shuō)明過(guò)渡剛進(jìn)入和離開(kāi)的時(shí)候透明度為0，即不顯示。當(dāng)然還可以設(shè)置其他的CSS屬性

總結(jié)

以上所述是小編給大家介紹的vue組件 keep-alive 和 transition 使用詳解,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: