vue自定义指令及避坑点总结

为了方便平时的开发，有时候我们可能会自定义一些指令。vue自定义指令分为全局自定义和局部自定义指令：
全局注册：在全局注册的时候发现了一个神坑，指令要写在vue实例化对象前面，否则会报错Failed to resolve directive；

Vue.directive('name',{})

局部注册

directive:{
 name:''
}

方便平时的开发，我们必须要熟悉自定义指令的钩子函数：
1.bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

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

3.update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 。

4.componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

5.unbind：只调用一次，指令与元素解绑时调用。

如果还是不太清楚可以参照另一个博主的例子https://blog.csdn.net/leon_smart/article/details/88724524
需要注意的是：除update 与 componentUpdated 钩子函数之外，每个钩子函数都含有 el、binding、vnode 这三个参数。
oldVnode 只有在 update 与 componentUpdated 钩子中生效。
参数el 就是指令绑定的 DOM 元素，而binding是一个对象，它包含一下属性：name、value、oldValue、expression、arg、modifiers。

另外值得注意的一点是，除了 el 之外，binding、vnode 属性都是只读的。

注：Vue自定义指令也可以写修饰符和传参