1. 指令週期

指令有5個生命週期

bind 指令繫結後，只執行一次，適合初始化
inserted 元素插入父節點後
update 元件VNode更新時
componentUpdated 元件VNode及其子VNode更新後呼叫
unbind 只執行一次，指令與元素解綁時

2. 生命週期引數說明

el：指令所繫結的元素，可以用來直接操作 DOM。
binding：一個物件，包含以下 property：
　　name：指令名，不包括 v- 字首。
　　value：指令的繫結值，例如：v-my-directive="1 + 1" 中，繫結值為 2。

　　oldValue：指令繫結的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
　　expression：字串形式的指令表示式。例如 v-my-directive="1 + 1" 中，表示式為 "1 + 1"。
　　arg：傳給指令的引數，可選。例如 v-my-directive:foo 中，引數為 "foo"。　　
　　modifiers：一個包含修飾符的物件。例如：v-my-directive.foo.bar 中，修飾符物件為 { foo: true, bar: true }。
　　vnode：Vue 編譯生成的虛擬節點。移步 VNode API 來了解更多詳情。
　　oldVnode：上一個虛擬節點，僅在 update 和 componentUpdated 鉤子中可用。

3. 週期簡寫

指令通常寫法

Vue.directive('color-swatch', {
    bind(){...}
    update(){...}
    unbind(){...}
})

如果bind和update總是相同，可以簡寫為一個函式

Vue.directive('color-swatch', function (el, binding) {
  ...
})

4. 經典場景

4.1 實現元素的visibility的隱藏功能

//以外掛的形式暴露指令，可以方便的以use的方式來引入指令
 

const oVisible = {
    install(Vue) {
        //全域性註冊在指令
        Vue.directive('visible', (el, binding) => {
            var value = binding.value;
            if (!!value) {
                el.style.visibility = 'visible';
            } else {
                el.style.visibility = 'hidden';
            }
        });
    }
};

if (typeof window !== 'undefined' && window.Vue) {
    window.Vue.use(oVisible);
}

export default oVisible;

使用

import VueVisible from 'vue-visible';

Vue.use(VueVisible);

<div v-visible="shouldVisible">測試例子</div>

4.2 實現點選元素外部執行方法，clickOutSide功能

Vue.directive('clickoutside',{
    bind(el, binding, vnode) {
        function onDocumentClick(e) {
            if (el.contains(e.target)) {
                return false
            }
            if (binding.expression) {
                binding.value(e)
            }
        }
        el.__vueClickOutside__ = onDocumentClick
        document.addEventListener('click', onDocumentClick)
    },
    unbind(el, binding) {
        document.removeEventListener('click', el.__vueClickOutside__)
        delete el.__vueClickOutside__
    }
})