摘要

自訂指令擁有一套與元件類似的生命週期鉤子，讓我們可以在指令與元素綁定的不同階段執行程式碼。

定義與說明

一個指令的定義物件可以提供數個鉤子函數，它們會在特定時間點被呼叫：

created：在綁定元素的屬性或事件監聽器被應用之前呼叫。
beforeMount：在元素被插入到 DOM 之前呼叫。
mounted：在元素被插入到 DOM 之後呼叫（最常用的鉤子）。
beforeUpdate：在元素自身更新之前呼叫。
updated：在元素自身及其子元素更新之後呼叫。
beforeUnmount：在元素被卸載之前呼叫。
unmounted：在元素被卸載之後呼叫（常用於清理工作）。

實作範例

Vue SFC

const vMyDirective = {
  mounted(el, binding) {
    console.log(`元素已掛載，值為: ${binding.value}`);
  },
  updated(el, binding) {
    console.log(`元素已更新，新值為: ${binding.value}`);
  },
  unmounted() {
    console.log('指令已卸載');
  }
}

結論

指令的生命週期鉤子為我們提供了在不同階段與 DOM 元素互動的精確控制能力，從初始化設定到最終的資源清理，都能找到合適的執行時機。

生命週期指令鉤子 DOM 操作