官方文档
https://cn.vuejs.org/v2/guide/custom-directive.html
现在假设你已经读了几遍官方文档。
什么叫钩子函数
这就是钩子（函数？）。
好吧，这是钩子，不是钩子函数。但是钩子函数的名字就是来自于生活中的钩子，尤其是应该理解为火车上的钩子。
也就是说，你不用关心一节火车车厢是怎么样的构造，也不用知道车厢是怎么造出来的，你只需知道，如果你打算使用这节车厢，那么，你只需关心车厢头部的钩子是什么样的结构即可，然后你根据钩子的技术文档，制造出对应的设备，跟钩子挂起来，也就可以跟车厢衔接起来，最后成为一个更强大的机械体。
反之，如果你偏不按照车厢的钩子来做对应的搭配，那么你就算把车厢结构了解的透透的，你依然不可能拉走这节车厢。对不对？
Vue.js其实暴露了非常多的钩子函数，最常用的生命周期函数都属于钩子函数。
钩子函数跟回调函数的区别
其实差不多，回调函数包括钩子函数。
很多回调函数，比如事件回调函数，都属于钩子函数。所以钩子函数只是一种特殊的回调函数。
钩子函数有2个特点：
最小暴露。就是浏览器、JS引擎、某个构造函数会暴露钩子，让你挂东西。比如click事件，你想在click之后执行你的代码，那么你就必须使用el.addEventListener('click', fn)，你不想写
addEventListener，或者把click写错当然不会有效果。钩子传递给你的参数，比如event，你可以使用，不传递给你的数据，你也没法使用。有机结合。就是你的回调函数跟钩子本身是有机结合的，比如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波纹特效》
