2.2 七個(gè)鉤子函數(shù)

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

　　created：在綁定元素的 attribute 或事件監(jiān)聽器被應(yīng)用之前調(diào)用。在指令需要附加在普通的 v-on 事件監(jiān)聽器調(diào)用前的事件監(jiān)聽器中時(shí)，這很有用。

　　beforeMount：當(dāng)指令第一次綁定到元素并且在掛載父組件之前調(diào)用。

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

　　beforeUpdate：在更新包含組件的 VNode 之前調(diào)用。

　　updated：在包含組件的 VNode 及其子組件的 VNode 更新后調(diào)用。

　　beforeUnmount：在卸載綁定元素的父組件之前調(diào)用

　　unmounted：當(dāng)指令與元素解除綁定且父組件已卸載時(shí)，只調(diào)用一次。

　　雖然鉤子函數(shù)比較多，看著有點(diǎn)唬人，不過(guò)我們?nèi)粘ｉ_發(fā)中用的最多的其實(shí)是 mounted 函數(shù)。

　　2.3 四個(gè)參數(shù)

　　這里七個(gè)鉤子函數(shù)，鉤子函數(shù)中有回調(diào)參數(shù)，回調(diào)參數(shù)有四個(gè)，含義基本上和 Vue2 一致：

　　el：指令所綁定的元素，可以用來(lái)直接操作 DOM，我們松哥說(shuō)想實(shí)現(xiàn)一個(gè)可以自動(dòng)判斷組件顯示還是隱藏的指令，那么就可以通過(guò) el 對(duì)象來(lái)操作 DOM 節(jié)點(diǎn)，進(jìn)而實(shí)現(xiàn)組件的隱藏。

　　binding：我們通過(guò)自定義指令傳遞的各種參數(shù)，主要存在于這個(gè)對(duì)象中，該對(duì)象屬性較多，如下屬性是我們?nèi)粘ｉ_發(fā)使用較多的幾個(gè)：

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

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

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

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

　　vnode：Vue 編譯生成的虛擬節(jié)點(diǎn)。

　　oldVnode：上一個(gè)虛擬節(jié)點(diǎn)，僅在 update 和 componentUpdated 鉤子中可用。

　　除了 el 之外，其它參數(shù)都應(yīng)該是只讀的，切勿進(jìn)行修改。如果需要在鉤子之間共享數(shù)據(jù)，建議通過(guò)元素的 dataset 來(lái)進(jìn)行。

　　2.4 動(dòng)態(tài)參數(shù)

　　有一種動(dòng)態(tài)參數(shù)，這里也和小伙伴們分享下。正常情況下，我們自定義指令時(shí)傳遞的參數(shù)都是通過(guò) binding.value 來(lái)獲取到的，不過(guò)在這之外還有一種方式就是通過(guò) binding.arg 獲取參數(shù)。

　　我舉一個(gè)簡(jiǎn)單例子，假設(shè)我們上面這個(gè) onceClick 指令，默認(rèn)的時(shí)間單位時(shí)毫秒，假設(shè)現(xiàn)在想給時(shí)間設(shè)置單位，那么我們就可以這樣寫：

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

　　timeUnit 是一個(gè)提前定義好的變量。

　　3. 自定義權(quán)限指令

　　好啦，有了上面的基礎(chǔ)知識(shí)，接下來(lái)就來(lái)看我們本文的主題，自定義權(quán)限指令，我寫一個(gè)簡(jiǎn)單的例子大家來(lái)看下

　　usersPermissions 表示當(dāng)前用戶所具備的權(quán)限，正常該數(shù)據(jù)應(yīng)該是從服務(wù)端加載而來(lái)，但是我這里簡(jiǎn)單起見，就直接定義好了。

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

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

　　好啦，Vue3 自定義組件學(xué)會(huì)了沒?更多關(guān)于“java培訓(xùn)”的問題，歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學(xué)，課程大綱緊跟企業(yè)需求，更科學(xué)更嚴(yán)謹(jǐn)，每年培養(yǎng)泛IT人才近2萬(wàn)人。不論你是零基礎(chǔ)還是想提升，都可以找到適合的班型，千鋒教育隨時(shí)歡迎你來(lái)試聽。