Vue3.x -- 自定義指令使用

vue3.x：自定義指令

根據檔案可以知道3.x的指令比起2.x做了些改動，自定義指令的 API 改了名字，名字更貼近元件的生命週期。

• created - 新的！在元素的 attribute 或事件偵聽器應用之前呼叫。
• bind → beforeMount
• inserted → mounted
• beforeUpdate：新的！這是在元素本身更新之前呼叫的，很像元件生命週期勾點。
• update → 移除！有太多的相似之處要更新，所以這是多餘的，請改用 updated。
• componentUpdated → updated
• beforeUnmount：新的！與元件生命週期勾點類似，它將在解除安裝元素之前呼叫。
• unbind -> unmounted

對於2.x中自定義指令裡的一些方法名與底層做了些改動

3.x的自定義指令物件類似下面的樣子

const MyDirective = {
  beforeMount(el, binding, vnode, prevVnode) {},
  mounted() {},
  beforeUpdate() {}, // 新
  updated() {},
  beforeUnmount() {}, // 新
  unmounted() {}
}

下面根據官方的例子實現一個進入頁面自動聚焦input的指令

元件內宣告

在元件內部，與data同級使用

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

<script>
export default {
  data () {
    return {
    }
  },
  directives: {
    focus: {
      // 指令的定義
      mounted (el) {
        el.focus()
      }
    }
  }
}
</script>

全域性宣告

在main.js宣告

注意：要在掛載前

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

const app = createApp(App)
app.directive('focus', {
  // 當被繫結的元素掛載到 DOM 中時……
  mounted (el) {
    // 聚焦元素
    el.focus()
  }
})
app.mount('#app')
// createApp(App).mount('#app')