tags: Vuejs

動態組件 ✐

動態組件可以幫助我們動態切換組件，例如在網頁的多標籤介面中常見到動態切換組件的需求，便是動態組件能幫忙的場景之一。

使用動態組件

動態組件需要配合 <component> 內置組件以及 :is 這個特殊屬性，下方實作一個簡單的範例：

首先建立要切換的子組件 my-component-one、my-component-two

Vue.component('my-component-one', {
  data() {
    return {
      data: ''
    }
  },
  template: `<p>my-component-one</p>`
})

Vue.component('my-component-two', {
  data() {
    return {
      data: ''
    }
  },
  template: `<p>my-component-two</p>`
})

在父組件中，透過 <component> 組件配合 :is，便可以動態的切換組件。

const vm = new Vue({
  el: '#app',
  data: {
    currentComponent: 'my-component-one'
  },
  template: `<div id="app">
                  <button @click="changeComponent('my-component-one')">my-component-one</button>
                  <button @click="changeComponent('my-component-two')">my-component-two</button>
                  <div>
                      <component :is="currentComponent"/>
                  </div>
            </div>`,
  methods: {
    changeComponent(value) {
      this.currentComponent = value
    }
  },
})

可以觀察到透過動態組件，子組件實體在切換時會被銷毀，並且重新渲染當下的動態子組件。

這裡要記住的重點為：

透過動態組件，子組件 在切換時 instance 會被銷毀以及重新渲染。

透過在子組件生命週期鉤子加入 console 可以看見銷毀以及重新渲染的過程。請在子組件中加入下列代碼：

created() {
    console.log('my-component-two 被渲染了')
},
  destroyed() {
    console.log('my-component-one 被銷毀了')
},

可以看到在切換時子組件被銷毀，當下的動態子組件被渲染、銷毀的過程：

不過，動態組件在切換後由於子組件實體被銷毀，所以子組件本身的狀態也會被清除，這個時候可以透過 <keep-alive> 內置組件保存該子組件 instance。

接著來看看 <keep-alive> 吧！

在動態組件上使用 <keep-alive>

使用 <keep-alive> 這一個內置組件去包裹動態組件，可以緩存不活動的動態組件組件實體，這個時候組件的狀態便可以在切換的過程中保留。

今天假如子組件為下方 input 內容，在沒有使用 <keep-alive> 時使用，狀態無法保留：

我們可以看到切換後 input 內文字消失了。這個時候便可以使用 <keep-alive> 解決該問題。

在使用 <keep-alive> 後，子組件狀態會由於 <keep-alive> 緩存了組件實體而被保留下來。

deactivated、activated 生命週期鉤子

前面說到使用 <keep-alive> 後，實體將被保留，所以切換動態組件時，並不會觸發子組件的 創建 及 刪除，取而代之的在動態組件使用 <keep-alive> 後，切換組件時有了兩個特有的生命週期鉤子 deactivated、activated 分別在切換動態組件時調用：

• deactivated：在 <keep-alive> 緩存的組件被停用（自該組件切換到別的組件）時調用
• activated：在 <keep-alive> 緩存的組件被激活（切換到該組件）時調用

透過在子組件加上下列程式碼可以觀察上述生命週期：

created() {
    console.log('my-component-one 被創建了')
},
destroyed() {
    console.log('my-component-one 被銷毀了')
},
deactivated() {
    console.log('my-component-two 被停用了')
},
activated() {
    console.log('my-component-two 被激活了')
},

可以觀察到切換動態組件時組件並不會被創建、刪除，而是被激活或是停用。

結語

以上介紹了有關動態組件的使用以及如何保存動代組件的狀態，重點是如何去透過 <keep-alive> 保留組件狀態，並且可以在使用 <keep-alive> 時使用特有的生命週期鉤子。

以上為此次內容，感謝看到這裡的你，我們明天見。

若是文中有任何錯誤、錯字、想討論的內容，歡迎各位大大不吝鞭笞指正、交流分享，筆者不慎感激 ✦ ✦ ✦

▶︎ 筆者 github：https://github.com/YUN-RU-TSENG
▶︎ 老王賣瓜之筆者另一篇鐵人：每天來點 CSS Specification

▶︎ 倘若不斷向深處扎根，似乎就能茁壯成長 - RM

參考資料：

1. Vuejs.org 2.x