使用自定義指令的邏輯與使用事件修飾符的邏輯是一樣的，當(dāng)methods中存在操作DOM/BOM相關(guān)的邏輯的時(shí)候，就需要將其抽象成一個(gè)自定義指令，以便于業(yè)務(wù)邏輯與相關(guān)DOM操作解耦，并且使之更容易被單元測(cè)試。

本教程操作環(huán)境：windows7系統(tǒng)、vue2.9.6版，DELL G3電腦。

一. 怎么創(chuàng)建自定義指令

通過 Vue.directive 全局創(chuàng)建指令，Vue.directive 的第一個(gè)參數(shù)定義了指令的名稱，如下代碼創(chuàng)建了一個(gè)名為 resize 的指令。

Vue.directive("resize", {  });

在全局注冊(cè)這個(gè)指令之后，意味著可以任意組件中使用這個(gè)指令，可以直接在單文件組件的模板中直接使用指令，也可以在 JSX 中使用指令。按照約定，指令名字有 “v-” 前綴，前綴用于標(biāo)明這是一個(gè)前綴。

二. 什么時(shí)候用自定義指令

　　關(guān)于什么時(shí)候用自定義指令，其邏輯與使用事件修飾符的邏輯是一樣的。

　　使用事件修飾符很大程度上是為了讓我們的代碼顯得是數(shù)據(jù)驅(qū)動(dòng)并且易于測(cè)試的，將 DOM 的邏輯單獨(dú)委托出來，約定成一些特定的修飾符。（事件修飾符相關(guān)筆記：https://www.cnblogs.com/xiaoxuStudy/p/13233379.html#oneone）

　　其實(shí)，自定義指令也是一樣的邏輯，當(dāng)我們的 methods 中存在操作 DOM/BOM 相關(guān)的邏輯的時(shí)候，就該思考是否可以將其抽象成一個(gè)自定義指令，以便于業(yè)務(wù)邏輯與相關(guān) DOM 操作解耦，并且使之更容易被單元測(cè)試。

三. 鉤子函數(shù)

　　Vue 在這里嚴(yán)格遵循了設(shè)計(jì)模式中的開閉原則，通過約定的鉤子函數(shù)來讓開發(fā)者可以在不同的時(shí)機(jī)中去操作組件。（Vue官網(wǎng)鉤子函數(shù)相關(guān)：https://cn.vuejs.org/v2/guide/custom-directive.html#%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0）

1. 鉤子函數(shù)

Vue.directive("resize", {   //只調(diào)用一次，指令第一次綁定元素時(shí)調(diào)用   //在這里可以進(jìn)行一次性的初始化設(shè)置   bind: function(el, binding, value){},   //被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用   //（僅保證父節(jié)點(diǎn)存在，但不一定已被插入文檔中）   inserted: function(el, binding, vnode){},   //所在組件的 Vnode 更新時(shí)調(diào)用   //但是可能發(fā)生在其子 VNode 更新之前   //指令的值可能發(fā)生了變化，也可能沒有   //但是可以通過比較更新前后的值來忽略不必要的模板更新   update: function(el, binding, vnode, oldVnode){},   //指令所在的 VNode 及其子 VNode 全部更新后調(diào)用   componentUpdated: function(el, binding, vnode, oldVnode){},   //只調(diào)用一次，指令與元素解綁時(shí)調(diào)用   unbind: function(el, binding, vnode){}, });

鉤子函數(shù)例子

　　先來看第一對(duì)鉤子函數(shù) bind 與 unbind 函數(shù)，顧名思義，這兩個(gè)鉤子函數(shù)是在當(dāng)前這個(gè)指令聲明的元素綁定和解綁時(shí)被調(diào)用的，并且需要記住的是，bind 與 unbind 都只會(huì)被調(diào)用一次。

　　接下來看鉤子函數(shù) inserted。通常情況下，inserted 會(huì)在 bind 之后被調(diào)用。

　　bind 跟 inserted 的區(qū)別是：bind 中參數(shù) el.parentNode 為 null，inserted 中可以通過 el.parentNode 訪問當(dāng)前節(jié)點(diǎn)的父節(jié)點(diǎn)。當(dāng)有信息需要存放在父節(jié)點(diǎn)上、需要訪問父節(jié)點(diǎn)時(shí)，使用 inserted 的頻率高于 bind 。

　　接下來看最后一組鉤子函數(shù) update 跟 componentUpdate，這對(duì)鉤子函數(shù)會(huì)在 vnode 更新前后被調(diào)用。

　　與其他鉤子函數(shù)相比，update 跟 componentUpdate 傳入的參數(shù)多一個(gè) oldVnode，oldVnode 代表之前的 Virtual DOM 節(jié)點(diǎn)信息，vnode代表當(dāng)前的Virtual DOM 節(jié)點(diǎn)信息?？梢愿鶕?jù)比較 oldVnode 和 vnode 之間的差異來判斷模板是否需要更新，以減少不必要的模板更新，從而一定程度提高組件性能。

2. 鉤子函數(shù)參數(shù)

function(   // 指令所綁定的元素，可以用來直接操作 DOM   el,   // binding 一個(gè)對(duì)象，包含以下屬性   {     // 指令名，不包括 -v 前綴     name,     // 指令的綁定值，例如：v-my-directive="1+1"中，綁定值為 2     value,     // 指令綁定的前一個(gè)值     // 僅在 update 和 componentUpdated 鉤子中可用     oldValue,     //字符串形式的指令表達(dá)式     //例如 v-my-directive="1+1" 中，表達(dá)式為 "1+1"     expression,     //例如指令的參數(shù)，可選。     //例如 v-my-directive:foo 中，參數(shù)為 "foo"     arg,     //一個(gè)包含修飾符的對(duì)象     //例如：v-my-directive.foo.bar 中，     //修飾符對(duì)象為 {foo: true, bar: true}     modifiers   },   //Vue 編譯生成的虛擬節(jié)點(diǎn)   vnode,   //上一個(gè)虛擬節(jié)點(diǎn)，僅在 update 和 componentUpdated 鉤子中可用   oldVnode )

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

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

【