在Vue中为了更好的操作DOM元素，其内置了一些指令，比如v-model、v-if、v-show、v-text、v-html、v-for和v-bind等。除此之外，Vue也允许注册自定义指令。这些自定义指令可以说我们对普通DOM元素进行底层操作。比如@SARAH DRASNER写的一篇有关于Vue自定义指令的文章，简单易懂。今天自己也仔细撸了一下Vue中怎么实现自定义的指令。

钩子函数

创建自定义指令，在Vue中一个指令定义对象可以提供下面几个钩子函数，而这几个钩子函数都是可选的：

• bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
• inserted：被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入文档中）
• update：所在组件的VNode更新时调用，但是可能发生在其子VNode更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
• componentUpdated：指令所在组件的VNode及其子VNode全部更新后调用
• unbind：只调用一次，指令与元素解绑时调用

上图来自于《The Power of Custom Directives in Vue》一文。

来看一个简单的示例，看看这些钩子函数的触发时机。

至于怎么自定义一个指令，先不阐述。在Vue中通过Vue.directive('directiveName', {...})方式来注册一个指令。在实际调用的时候需要前面添加v-来使用。有关于这方面的细节，我们稍后再阐述。

Vue.directive('hello', {
    // 只调用一次，指令第一次绑定到元素时调用
    bind: function (el) {
        console.log('触发bind钩子函数！')
    },
    // 被绑定元素插入父节点时调用
    inserted: function (el) {
        console.log('触发inserted钩子函数！')
    },
    // 所在组件的`VNode`更新时调用，但是可能发生在其子元素的`VNode`更新之前
    update: function (el) {
        console.log('触发update钩子函数！')
    },
    // 所在组件的`VNode`及其子元素的`VNode`全部更新时调用
    componentUpdated: function (el) {
        console.log('触发componentUpdated钩子函数！')
    },
    // 只调用一次，指令与元素解绑时调用
    unbind: function (el) {
        console.log('触发unbind钩子函数！')
    }
})

let myComponent = {
    template: '<h1 v-hello>{{ message }}</h1>',
    props: {
        message: String
    }
}

let app = new Vue({
    el: '#app',
    data () {
        return {
            message: 'Hello! 大漠'
        }
    },
    components: {
        myComponent: myComponent
    },
    methods: {
        update: function () {
            this.message = 'Hi! 大漠'
        },
        uninstall: function () {
            this.message = ''
        },
        install: function () {
            this.message = 'Hello！W3cplus'
        }
    }
})

<div id="app">
    <my-component v-if="message" :message="message"></my-component>
    <div class="actions">
        <button @click="update">更新</button>
        <button @click="uninstall">卸载</button>
        <button @cl