Vue 提供了很多指令，如：v-model, v-show，v-if等等，有利于應(yīng)付開發(fā)時出現(xiàn)的各種情況。Vue 也提供了自定義指令，有利于開發(fā)者將某些通用性功能封裝成一個指令，進(jìn)行全局或局部注冊。如：復(fù)制指令（copy），聚焦指令（focus）。vue2 與 vue3 指令的創(chuàng)建與注冊都有不同的。
只有當(dāng)所需功能只能通過直接的 DOM 操作來實(shí)現(xiàn)時，才應(yīng)該使用自定義指令。

vue2

注冊自定義指令的方式

• 全局注冊自定義指令

// 如果是用 cli 搭建的項(xiàng)目，在main.js文件下注冊一個 focus指令
Vue.directive('focus', {inserted: function (el) {el.focus();},
});

• 局部注冊自定義指令

export default {name: 'App',components: {},// 指令directives: {focus: {inserted: function (el) {el.focus();},},},
};

指令的使用

<template>
<!--  使用自定義指令 v-focus  --><input v-focus />
</template>

可以看到上面自定義focus，使用時需要加上v-前綴。

指令的鉤子函數(shù)

• bind：只調(diào)用一次，指令第一次綁定到元素時調(diào)用。在這里可以進(jìn)行一次性的初始化設(shè)置。
• inserted：被綁定元素插入父節(jié)點(diǎn)時調(diào)用 (僅保證父節(jié)點(diǎn)存在，但不一定已被插入文檔中)。
• update：所在組件的 VNode 更新時調(diào)用，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變，也可能沒有
• componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。
• unbind：只調(diào)用一次，指令與元素解綁時調(diào)用。

鉤子函數(shù)的參數(shù)

每一個鉤子函數(shù)都有相同的參數(shù)，左右到右的順序

• el：指令所綁定的元素，可以用來直接操作 DOM。
• binding：一個對象，包含以下 property：
  • name：指令名，不包括 v- 前綴。
  • value：指令的綁定值，例如：v-my-directive=“1 + 1” 中，綁定值為 2。
  • oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
  • expression：字符串形式的指令表達(dá)式。例如 v-my-directive=“1 + 1” 中，表達(dá)式為 “1 + 1”。
  • arg：傳給指令的參數(shù)，可選。例如 v-my-directive:foo 中，參數(shù)為 “foo”。
  • modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }。
• vnode：Vue 編譯生成的虛擬節(jié)點(diǎn)。移步 VNode API 來了解更多詳情。
• oldVnode：上一個虛擬節(jié)點(diǎn)，僅在 update 和 componentUpdated 鉤子中可用。

注意：處理 el外，不同鉤子直接要進(jìn)行數(shù)據(jù)共享，請使用dataset。

vue3

setup 的情況

在 script上有 setup情況下， 以v開頭的駝峰命令變量就會自動注冊為指令。

• 注冊局部指令

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

沒有setup 的情況

• 局部注冊

<script>export default {setup() {/*...*/},directives: {// 在模板中啟用 v-focusfocus: {/* ... */}}
}
</script>

全局注冊

上面介紹了在有沒有setup的情況下，局部注冊指令。全局注冊指令是上面兩種情況共有的。

const app = createApp({})// 使 v-focus 在所有組件中都可用
app.directive('focus', {/* ... */
})

指令鉤子函數(shù)

指令鉤子函數(shù)都是可選的。如上面的 focus指令只使用了mounted鉤子

const myDirective = {// 在綁定元素的 attribute 前// 或事件監(jiān)聽器應(yīng)用前調(diào)用created(el, binding, vnode, prevVnode) {// 下面會介紹各個參數(shù)的細(xì)節(jié)},// 在元素被插入到 DOM 前調(diào)用beforeMount(el, binding, vnode, prevVnode) {},// 在綁定元素的父組件// 及他自己的所有子節(jié)點(diǎn)都掛載完成后調(diào)用mounted(el, binding, vnode, prevVnode) {},// 綁定元素的父組件更新前調(diào)用beforeUpdate(el, binding, vnode, prevVnode) {},// 在綁定元素的父組件// 及他自己的所有子節(jié)點(diǎn)都更新后調(diào)用updated(el, binding, vnode, prevVnode) {},// 綁定元素的父組件卸載前調(diào)用beforeUnmount(el, binding, vnode, prevVnode) {},// 綁定元素的父組件卸載后調(diào)用unmounted(el, binding, vnode, prevVnode) {}
}

指令鉤子函數(shù)的參數(shù)

• el：指令綁定到的元素。這可以用于直接操作 DOM。
• binding：一個對象，包含以下屬性。
  • value：傳遞給指令的值。例如在 v-my-directive=“1 + 1” 中，值是 2。
  • oldValue：之前的值，僅在 beforeUpdate 和 updated 中可用。無論值是否更改，它都可用。
  • arg：傳遞給指令的參數(shù) (如果有的話)。例如在 v-my-directive:foo 中，參數(shù)是 “foo”。
  • modifiers：一個包含修飾符的對象 (如果有的話)。例如在 v-my-directive.foo.bar 中，修飾符對象是 { foo: true, bar: true }。
  • instance：使用該指令的組件實(shí)例。
  • dir：指令的定義對象。
• vnode：代表綁定元素的底層 VNode。
• prevNode：之前的渲染中代表指令所綁定元素的 VNode。僅在 beforeUpdate 和 updated 鉤子中可用。

指令的使用

<template>
<!--  使用自定義指令 v-focus  --><input v-focus />
</template>

vue2 與 vue3 之間 指令的對比

• 注冊方式不一樣，選項(xiàng)式的注冊方式基本相同，vue3 多了一個setup 情況下注冊指令。
• vue2 與 vue3 的指令鉤子不一樣，vue3 的指令鉤子像組件生命周期
• 兩個版本都是除el參數(shù)外，其他參數(shù)應(yīng)該為只讀狀態(tài)，如果鉤子之間需要數(shù)據(jù)共享，可以采用dataset的方式。

參考文章

1. Vue2 自定義指令
2. Vue3 自定義指令