持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第19天，点击查看活动详情

前言

上一章我们简易声明了一个自定义指令，并用到了指令对象中的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()