Vue 提供的指令像是 v-if、v-for 等等，除了這些指令外，我們也可以自定義一個指令 v-xxx 出來

範例

app.directive('focus', {
  mounted(el) {
    el.focus()
  }
})

• 自定義一個 focus 自動聚焦指令
  在模板中使用

<input v-focus />

不同的註冊方式

全域註冊

// main.js
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

// 全域註冊
app.directive('focus', {
  mounted(el) {
    el.focus()
  }
})

app.mount('#app')

使用方式

<input v-focus />

區域註冊
在單一元件中定義，只有那個元件能使用

<script setup>
const vFocus = {
  mounted(el) {
    el.focus()
  }
}
</script>

<template>
  <input v-focus />
</template>

生命週期

1. created
   • 指令被綁定到元素，但元素尚未插入 DOM
   • 可做初始化設定，例如建立初始狀態
2. beforeMount
   • 元素即將插入 DOM
   • 這時 DOM 還不可操作，僅能做預先處理
3. mounted
   • 元素已插入 DOM，可安全地存取與操作它
   • 適合做聚焦、事件綁定等行為
4. beforeUpdate
   • 元素更新前觸發
   • 可用來比對新舊值或做暫時性清除
5. updated
   • 元素更新完成
   • 適合根據新值重新操作 DOM
6. beforeUnmount
   • 元素即將被移除
   • 可在這裡進行清理前置動作
7. unmounted
   • 元素已被移除
   • 用來釋放資源、移除事件監聽、清除計時器

小結

• 如何自定義指令
• 全域註冊與區域註冊
• 指令的生命週期