2.2 七個鉤子函數

　　在 Vue3 中，自定義指令的鉤子函數主要有如下七種(這塊跟 Vue2 差異較大)：

　　created：在綁定元素的 attribute 或事件監聽器被應用之前調用。在指令需要附加在普通的 v-on 事件監聽器調用前的事件監聽器中時，這很有用。

　　beforeMount：當指令第一次綁定到元素并且在掛載父組件之前調用。

　　mounted：在綁定元素的父組件被掛載后調用，大部分自定義指令都寫在這里。

　　beforeUpdate：在更新包含組件的 VNode 之前調用。

　　updated：在包含組件的 VNode 及其子組件的 VNode 更新后調用。

　　beforeUnmount：在卸載綁定元素的父組件之前調用

　　unmounted：當指令與元素解除綁定且父組件已卸載時，只調用一次。

　　雖然鉤子函數比較多，看著有點唬人，不過我們日常開發中用的最多的其實是 mounted 函數。

　　2.3 四個參數

　　這里七個鉤子函數，鉤子函數中有回調參數，回調參數有四個，含義基本上和 Vue2 一致：

　　el：指令所綁定的元素，可以用來直接操作 DOM，我們松哥說想實現一個可以自動判斷組件顯示還是隱藏的指令，那么就可以通過 el 對象來操作 DOM 節點，進而實現組件的隱藏。

　　binding：我們通過自定義指令傳遞的各種參數，主要存在于這個對象中，該對象屬性較多，如下屬性是我們日常開發使用較多的幾個：

　　name：指令名，不包括 v- 前綴。

　　value：指令的綁定值，例如：v-hasPermission="['user:delete']" 中，綁定值為 'user:delete'，不過需要小伙伴們注意的是，這個綁定值可以是數組也可以是普通對象，關鍵是看你具體綁定的是什么，在 2.1 小節的案例中，我們的 value 就是一個數字。

　　expression：字符串形式的指令表達式。例如 v-my-directive=“1 + 1” 中，表達式為 “1 + 1”。

　　arg：傳給指令的參數，可選。例如 v-hasPermission:[name]="'zhangsan'" 中，參數為 “name”。

　　vnode：Vue 編譯生成的虛擬節點。

　　oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。

　　除了 el 之外，其它參數都應該是只讀的，切勿進行修改。如果需要在鉤子之間共享數據，建議通過元素的 dataset 來進行。

　　2.4 動態參數

　　有一種動態參數，這里也和小伙伴們分享下。正常情況下，我們自定義指令時傳遞的參數都是通過 binding.value 來獲取到的，不過在這之外還有一種方式就是通過 binding.arg 獲取參數。

　　我舉一個簡單例子，假設我們上面這個 onceClick 指令，默認的時間單位時毫秒，假設現在想給時間設置單位，那么我們就可以這樣寫：

　　在自定義指令的時候，獲取到 binding.arg 的值，這樣就可以知道時間單位了，在使用該指令的時候，方式如下：

　　timeUnit 是一個提前定義好的變量。

　　3. 自定義權限指令

　　好啦，有了上面的基礎知識，接下來就來看我們本文的主題，自定義權限指令，我寫一個簡單的例子大家來看下

　　usersPermissions 表示當前用戶所具備的權限，正常該數據應該是從服務端加載而來，但是我這里簡單起見，就直接定義好了。

　　具體的邏輯很簡單，先從 binding 中提取出 value 的值，這就是當前控件所需要的權限，然后遍歷 usersPermissions 用一個 some 函數，去查看 usersPermissions 中是否有滿足條件的值，如果沒有，說明當前用戶不具備展示該組件所需要的權限，那么就要隱藏這個組件，隱藏的方式就是獲取到當前組件的父組件，然后從父組件中移除當前組件即可。

　　這是一個全局的指令，定義好之后，我們就可以在組件中直接使用了：

　　好啦，Vue3 自定義組件學會了沒?更多關于“java培訓”的問題，歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學，課程大綱緊跟企業需求，更科學更嚴謹，每年培養泛IT人才近2萬人。不論你是零基礎還是想提升，都可以找到適合的班型，千鋒教育隨時歡迎你來試聽。