前言

上一章我们简易声明了一个自定义指令，并用到了指令对象中的mounted钩子函数，并通过他钩子函数的入参，实现了input自动聚焦的功能。不过你以为的钩子函数以及入参就这么简单吗？那就大错特错了，下面我们就让我们看看他还有哪些其他的钩子函数和入参吧。

指令的钩子函数

指令的钩子函数其实和组件的生命周期钩子函数很像，基本你记住其中一个，另一个也会得心应手的。

• created: 在事件监听器应用或者元素绑定前进行调用
  
• beforeMount：将元素插入到DOM之前调用
  
• mounted: 在绑定元素的所有节点挂载完成之后调用（包括其父节点和所有子节点）
  
• beforeUpdate：在绑定元素更新之前调用（包括父组件）
  
• updated：在绑定元素更新之后调用（包括父组件）
  
• beforeUnmount：在绑定元素卸载之前调用（包括父组件）
  
• unmount：在绑定元素卸载之后调用（包括父组件）

const vSelfDirective = {
  created(el, binding, vnode, prevVnode) {},
  beforeMount(el, binding, vnode, prevVnode) {},
  mounted(el, binding, vnode, prevVnode) {},
  beforeUpdate(el, binding, vnode, prevVnode) {},
  updated(el, binding, vnode, prevVnode) {},
  beforeUnmount(el, binding, vnode, prevVnode) {},
  unmounted(el, binding, vnode, prevVnode) {}
}
复制代码

指令的钩子参数

在使用钩子函数时，我们可以接到这几种参数。这里就浅浅的介绍下，比较自定义用的场景也不多，更何况这些呢。

• el：当前指令绑定的元素，可以直接操作DOM
  
• binding：入参为一个对象。属性如下：

• value：传递给指令的值。
  
• oldValue：之前的值。
  
• arg：传递给指令的参数。
  
• modifiers：包含修饰符的对象。
  
• instance：该指令绑定元素的组件实例。
  
• dir：指令的定义对象。
  

• vnode：绑定元素的底层VNode。
  
• prevVnode：之前绑定元素的底层VNode。

指令的简化形式

当我们使用自定义指令的时候，大多情况下我们是会在mounted和updated上都会执行相同的行为。而为此，vue也给我们提供简化的形式。

当我们声明自定义指令时，不需要放在对象里面，指令声明一个函数即可：

const vFocus = (el) => el.focus()