Vue 自定义指令详解：全局、局部指令及钩子函数

Vue 自定义指令是 Vue 中一种特殊的功能，用于在 DOM 元素上添加自定义行为。通过自定义指令，我们可以直接操作 DOM，监听 DOM 事件，或者修改 DOM 元素的样式等。

Vue 自定义指令有全局指令和局部指令两种形式。

全局指令是在 Vue 实例化之前定义的指令，可以在应用的任何组件中使用。全局指令通过 Vue.directive() 方法进行定义，该方法接受两个参数：指令名称和指令选项对象。指令选项对象包含一系列钩子函数，用于定义指令的行为。

局部指令是在组件中定义的指令，只能在该组件的模板中使用。局部指令直接在组件的 directives 选项中进行定义，也是通过指令选项对象来定义指令的行为。

自定义指令的常用钩子函数包括：

bind: 指令绑定到元素时调用，可以在这个钩子函数中进行一些初始化的操作。
inserted: 当绑定的元素插入到父节点时调用，可以在这个钩子函数中进行一些 DOM 操作。
update: 当绑定的元素所在的组件更新时调用，可以在这个钩子函数中根据更新的值进行相应的操作。
componentUpdated: 当绑定的元素所在的组件及其子组件更新完成时调用。
unbind: 指令与元素解绑时调用，可以在这个钩子函数中进行一些清理操作。

自定义指令通过 Vue.directive() 方法定义后，可以在模板中使用 'v-指令名' 的形式进行绑定，例如 'v-mydirective'。指令名称也可以通过 Vue.directive() 方法的第一个参数进行配置，使其在模板中可以使用不同的指令名。指令绑定的值可以是一个表达式，也可以是一个对象，对象中可以定义多个属性来传递不同的值给指令。指令还可以接收修饰符，用于对指令的行为进行进一步的控制。