vue3.0自定義指令（drectives)
阿新 • • 發佈：2020-12-27
在大多數情況下，你都可以操作資料來修改檢視，或者反之。但是還是避免不了偶爾要操作原生 DOM，這時候，你就能用到自定義指令。
舉個例子，你想讓頁面的文字框自動聚焦，在沒有學習自定義指令的時候，我們可能會這麼做。
```javascript
const app = Vue.createApp({
mounted(){
this.$refs.input.focus();
},
template: ``,
});
```
在mounted鉤子函式裡，通過 $refs 獲取需要聚焦的 DOM 元素，然後呼叫 focus 方法完成自動聚焦的功能。
## 基本使用
上面做法已經實現了我們需要的功能，但是假如說我們有多個元件都需要這個功能，那我們只能把這段程式碼複製過去，重新實現邏輯。我們下面看下如果使用自定義指令，應該怎麼做。
```javascript
const app = Vue.createApp({
// 通過 v-[自定義指令名稱] 繫結自定義指令
template: ``,
});
// 註冊一個全域性自定義指令
app.directive('focus',{
// 當被繫結的元素插入到DOM的時候執行..
mounted(el){
el.focus();
}
})
```
如上，我們定義了一個全域性自定義指令 `focus`，並通過 `v-focus` 繫結到需要聚焦的 input 元素上。如果，其他元件或模組也需要聚焦功能，只要簡單的繫結此指令即可。
## 自定義指令的鉤子函式
我們在上面定義指令的時候，會發現其中包含了 `mounted` 鉤子函式，指令還提供瞭如下鉤子函式，我們用程式碼的形式來給大家列出來。
```javascript
app.directive('directiveName', {
// 指令繫結元素掛載前
beforeMount(el) {},
// 指令繫結元素掛載後
mounted(el, binding) {},
// 指令繫結元素因為資料修改觸發修改前
beforeUpdate(el) {},
// 指令繫結元素因為資料修改觸發修改後
updated(el) {},
// 指令繫結元素銷燬前
beforeUnmount(el) {},
// 指令繫結元素銷燬後
unmounted(el) {},
});
```
效果就不一一列舉了，有興趣大家可以嘗試下分別觸發這些鉤子函式。指令鉤子函式大部分與元件很類似，大家可以對比著來看。
## 動態指令引數
下面，我們再來看一個例子。
```javascript
const app = Vue.createApp({
template: ``,
});
// 在很多時候，你可能想在 mounted 和 updated 時觸發相同行為，而不關心其它的鉤子，就這樣寫
app.directive('absTop', (el) => {
el.style[binding.arg] = '100px';
});
```
我們在 div 元素上繫結 `absTop` 指令，div 元素本身定位是 absolute，指令執行讓繫結元素的 top 為 100px。這時候，我想在繫結指令的時候能夠傳一個引數，使得元素的 top 值可以根據引數來改變。程式碼如下：
```javascript
const app = Vue.createApp({
data() { return { num: 100 } },
template: ``,
});
app.directive('absTop', (el, binding) => {
el.style.top = binding.value + 'px';
});
```
元素可以通過 `v-directive="value"` 傳入動態引數，指令通過鉤子函式的第二個引數 binding.value 來接收引數。
如果其他元素可能不是修改 top 的值，有可能是 left、right 或者 bottom，那麼指令可以動態指定嗎？其實也是可以做到的。首先，我們修改模板為：
```html
```
然後修改指令本身
```javascript
app.directive('absTop', (el, binding) => {
el.style[binding.arg] = binding.value + 'px';
});
```
在 `v-mydirective:[argument]="value"` ，arguments 也是可以動態改變的，這樣，就可以完美的實現上述要求了。
## 元件的使用
元件中繫結指令與 DOM元素繫結指令並沒有什麼不同，指令會獲取元件的原生 `根DOM ` 來操作。但是要注意的是，在 vue3.0 中，元件可能有多個根節點，指令繫結在多根節點元件是有問題的。
## 區域性自定義指令
最後，再來簡單說下區域性自定義指令是怎麼定義的。
```javascript
const app = Vue.createApp({
directives: {
focus: {
// 指令的定義
mounted(el) {
el.focus()
}
}
}
}
```
區域性指令定義和全域性指令基本一致，如上所示，在元件中定義 directives 就可以了。
## 總結
自定義指令可以提取出原生DOM操作的邏輯。所以指令的應用範圍主要表現在，當一些操作涉及到 DOM 底層時，而且操作邏輯可能用於多處地方，就適合用指令來封裝這些