官方文档

https://cn.vuejs.org/v2/guide/custom-directive.html

现在假设你已经读了几遍官方文档。

什么叫钩子函数

钩子（函数？）

这就是钩子（函数？）。

好吧，这是钩子，不是钩子函数。但是钩子函数的名字就是来自于生活中的钩子，尤其是应该理解为火车上的钩子。

也就是说，你不用关心一节火车车厢是怎么样的构造，也不用知道车厢是怎么造出来的，你只需知道，如果你打算使用这节车厢，那么，你只需关心车厢头部的钩子是什么样的结构即可，然后你根据钩子的技术文档，制造出对应的设备，跟钩子挂起来，也就可以跟车厢衔接起来，最后成为一个更强大的机械体。

反之，如果你偏不按照车厢的钩子来做对应的搭配，那么你就算把车厢结构了解的透透的，你依然不可能拉走这节车厢。对不对？

Vue.js其实暴露了非常多的钩子函数，最常用的生命周期函数都属于钩子函数。

钩子函数跟回调函数的区别

其实差不多，回调函数包括钩子函数。

很多回调函数，比如事件回调函数，都属于钩子函数。所以钩子函数只是一种特殊的回调函数。

钩子函数有2个特点：

1. 最小暴露。就是浏览器、JS引擎、某个构造函数会暴露钩子，让你挂东西。比如click事件，你想在click之后执行你的代码，那么你就必须使用el.addEventListener('click', fn)，你不想写addEventListener，或者把click写错当然不会有效果。钩子传递给你的参数，比如event，你可以使用，不传递给你的数据，你也没法使用。

2. 有机结合。就是你的回调函数跟钩子本身是有机结合的，比如click事件，用户触发了click之后，回调函数代码应该做出对应的响应，比如弹个窗什么的，回调函数的内容专门为用户点击而编写，回调函数使用的参数也是来自于钩子。而普通回调函数，比如setTimeout(fn, 1000)，fn的代码跟延迟1秒没有必然关系，因为fn本身是一个逻辑，至于是否必须延迟1秒执行，还是延迟2秒执行、还是不延迟直接执行，都可以，这也就是无结合，属于普通回调函数。

bind钩子

只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

就是说元素此时还没有被插入到DOM中，元素不可见，此时可以做的事情，我建议只做与CSS相关的事情，比如给这个元素设一系列初始样式。尽管元素还没有进入DOM，但是提前设样式没什么问题。

inserted钩子

被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

这里说的“不保证已被插入DOM中”涉及到虚拟DOM机制，笼统说你可以不用去管这句话，初学者可以理解为，通常情况下，inserted钩子意味着元素已经可见。

update钩子和componentUpdated钩子

官方对这两者的区别解释也比较难懂，笼统说，这两者的共同点是，凡组件更新一定会触发这两个钩子的钩子函数，update在componentUpdated之前触发，不同点是：

• update 是组件更新前的状态
• componentUpdated 是组件更新后的状态

unbind钩子

只调用一次，指令与元素解绑时调用。

所谓解绑，一般是指元素从DOM中删除。

实例说明

什么事都不如实例说明。

首先准备一个父组件，其中@/views/dashboard/directiveChild是我的测试用的路径，你不一定是这样的路径。

<template>
  <div>
    <directive-child :textContent="textContent" :should-bind="shouldBind" />
  </div>
</template>

<script>
import directiveChild from '@/views/dashboard/directiveChild'
export default {
  components: {
    directiveChild
  },
  data() {
    return {
      textContent: '',
      shouldBind: true
    };
  },
  mounted() {
    setTimeout(() => {
      this.textContent = '内容';
    }, 2000);

    setTimeout(() => {
      this.shouldBind = false;
    }, 4000);
  },
}

</script>

<style>

</style>

子组件如下：

<template>
  <div id="childDiv"><span v-if="shouldBind" v-dir>{{ textContent }}</span></div>
</template>

<script>
export default {
  props: {
    textContent: String,
    shouldBind: Boolean
  },
  directives: {
    dir: {
      bind(el) {
        console.log('bind钩子。parentNode存在：' + !!el.parentNode);
      },
      inserted(el) {
        console.log('inserted钩子。parentNode存在：' + !!el.parentNode + ' ，id是：' + el.parentNode.id);
      },
      update(el) {
        console.log('update钩子。此时元素内容是：' + el.textContent);
      },
      componentUpdated(el) {
        console.log('componentUpdated钩子。此时元素内容是：' + el.textContent);
      },
      unbind(el) {
        console.log('unbind钩子。parentNode存在：' + !!el.parentNode);
      }
    }
  },
}
</script>

打开父组件，得到结果：

bind钩子。parentNode存在：false
inserted钩子。parentNode存在：true
update钩子。此时元素内容是：
componentUpdated钩子。此时元素内容是：内容
unbind钩子。parentNode存在：false

解释：

• bind钩子和inserted钩子是第一时间打印的，区别是，bind触发时，parentNode（即directiveChind组件里的那个id是childDiv的节点）还没存在，而inserted时，那个id是childDiv的节点已经存在。这里说的“不存在”、“存在”都涉及到虚拟DOM，需要另外了解。
• update钩子和componentUpdated钩子是2秒后打印的，触发原因是修改了元素所在组件（即directiveChild）的内容，注意，不一定仅限于修改了元素相关的内容，而是修改directiveChild组件的任意内容都可以。
• unbind钩子是4秒后打印的，触发原因是移除了元素。

钩子函数的参数

其实它的参数属于好理解的，因为：

除了 el 之外，其它参数都应该是只读的，切勿进行修改。

既然不让修改，那么问题就简单的多了，不多解释。

动态指令参数

动态指令参数理解起来并不难，是为了更好地复用代码。只需要记住：

• 在钩子函数里先获取binding.arg的值，根据值做不同处理就行了。
• 用指令的时候写成<p v-pin:[direction]="200">就好了。

函数简写

官方文档的例子其实就是说，如果定义指令的时候，不再定义成一个对象，而是一个函数，那么这个函数会默认作为bind和inserted的钩子函数，而不去管其他三个钩子。

为什么有这种简写？因为实践中，bind和inserted的钩子函数往往内容一致，而且不需要另外三个钩子函数，尤其是不需要unbind钩子函数。

练习：模仿Material Design的波纹效果做一个自定义指令

参看我的另一篇《vue.js自定义指令实现点击waves波纹特效》