vue3.0自定義指令（drectives)

在大多數狀況下，你均可以操做數據來修改視圖，或者反之。可是仍是避免不了偶爾要操做原生 DOM，這時候，你就能用到自定義指令。

舉個例子，你想讓頁面的文本框自動聚焦，在沒有學習自定義指令的時候，咱們可能會這麼作。

const app = Vue.createApp({
  mounted(){
    this.$refs.input.focus();
  },  
  template: `<input type="text" ref="input" />`,
});

在mounted鉤子函數裏，經過 $refs 獲取須要聚焦的 DOM 元素，而後調用 focus 方法完成自動聚焦的功能。

基本使用

上面作法已經實現了咱們須要的功能，可是假如說咱們有多個組件都須要這個功能，那咱們只能把這段代碼複製過去，從新實現邏輯。咱們下面看下若是使用自定義指令，應該怎麼作。

const app = Vue.createApp({
  // 經過 v-[自定義指令名稱] 綁定自定義指令
  template: `<input type="text" v-focus/>`,
});
// 註冊一個全局自定義指令
app.directive('focus',{
  // 當被綁定的元素插入到DOM的時候執行..
  mounted(el){
    el.focus();
  }
})

如上，咱們定義了一個全局自定義指令 focus，並經過 v-focus 綁定到須要聚焦的 input 元素上。若是，其餘組件或模塊也須要聚焦功能，只要簡單的綁定此指令便可。

自定義指令的鉤子函數

咱們在上面定義指令的時候，會發現其中包含了 mounted 鉤子函數，指令還提供了以下鉤子函數，咱們用代碼的形式來給你們列出來。

app.directive('directiveName', {
  // 指令綁定元素掛載前
  beforeMount(el) {},
  // 指令綁定元素掛載後
  mounted(el, binding) {},
  // 指令綁定元素由於數據修改觸發修改前
  beforeUpdate(el) {},
  // 指令綁定元素由於數據修改觸發修改後
  updated(el) {},
  // 指令綁定元素銷燬前
  beforeUnmount(el) {},
  // 指令綁定元素銷燬後
  unmounted(el) {},
});

效果就不一一列舉了，有興趣你們能夠嘗試下分別觸發這些鉤子函數。指令鉤子函數大部分與組件很相似，你們能夠對比着來看。

動態指令參數

下面，咱們再來看一個例子。

const app = Vue.createApp({
  template: `<div class="box" v-abs-top="num" style="position:absolute;" ></div>`,
});
// 在不少時候，你可能想在 mounted 和 updated 時觸發相同行爲，而不關心其它的鉤子，就這樣寫
app.directive('absTop', (el) => {
  el.style[binding.arg] = '100px';
});

咱們在 div 元素上綁定 absTop 指令，div 元素自己定位是 absolute，指令執行讓綁定元素的 top 爲 100px。這時候，我想在綁定指令的時候可以傳一個參數，使得元素的 top 值能夠根據參數來改變。代碼以下：

const app = Vue.createApp({
  data() { return { num: 100 } },
  template: `<div class="box" v-abs-top="num"></div>`,
});
app.directive('absTop', (el, binding) => {
  el.style.top = binding.value + 'px';
});

元素能夠經過 v-directive="value" 傳入動態參數，指令經過鉤子函數的第二個參數 binding.value 來接收參數。

若是其餘元素可能不是修改 top 的值，有多是 left、right 或者 bottom，那麼指令能夠動態指定嗎？其實也是能夠作到的。首先，咱們修改模板爲：

<div class="box" v-abs:left="num"></div>

而後修改指令自己

app.directive('absTop', (el, binding) => {
  el.style[binding.arg] = binding.value + 'px';
});

在 v-mydirective:[argument]="value" ，arguments 也是能夠動態改變的，這樣，就能夠完美的實現上述要求了。

組件的使用

組件中綁定指令與 DOM元素綁定指令並無什麼不一樣，指令會獲取組件的原生 根DOM  來操做。可是要注意的是，在 vue3.0 中，組件可能有多個根節點，指令綁定在多根節點組件是有問題的。

局部自定義指令

最後，再來簡單說下局部自定義指令是怎麼定義的。

const app = Vue.createApp({
directives: {
    focus: {
      // 指令的定義
      mounted(el) {
        el.focus()
      }
    }
  }
}

局部指令定義和全局指令基本一致，如上所示，在組件中定義 directives 就能夠了。

總結

自定義指令能夠提取出原生DOM操做的邏輯。因此指令的應用範圍主要表如今，當一些操做涉及到 DOM 底層時，並且操做邏輯可能用於多處地方，就適合用指令來封裝這些邏輯。