一、概述

vue 除了内置的指令外（如 v-model、v-if、v-on 等等），也允许注册自定义指令。在 vue 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。

在vue3.x中，指令的钩子函数已经被重命名，以更好地与组件的生命周期保持一致。

二、@2.x

在 Vue 2 中，自定义指令通过使用下列钩子来创建，以对齐元素的生命周期，它们都是可选的：

  • bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。(created)
  • inserted：被绑定元素插入父节点时调用。(mounted)
  • update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。
  • componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
  • unbind：只调用一次，指令与元素解绑时调用。

总结：bind → inserted → update → componentUpdated → unbind

钩子参数：

  • el：指令所绑定的元素，可以用来直接操作 DOM
  • binding：一个对象，包含以下属性：
    • name：指令名，不包括 v- 前缀；
    • value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
    • oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用；
    • arg：指令参数，例如 v-my-directive:foo 中，参数为 foo；
    • expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 1 + 1；
    • modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }；
  • vnode：Vue 编译生成的虚拟节点
  • oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

三、@3.x

自定义指令生命周期：

  • created - 新增！在元素的 attribute 或事件监听器被应用之前调用。
  • bind → beforeMount
  • inserted → mounted
  • beforeUpdate：新增！在元素本身被更新之前调用，与组件的生命周期钩子十分相似。
  • update → 移除！该钩子与 updated 有太多相似之处，因此它是多余的。请改用 updated。
  • componentUpdated → updated
  • beforeUnmount：新增！与组件的生命周期钩子类似，它将在元素被卸载之前调用。
  • unbind -> unmounted

最终的API如下：

  1. const MyDirective = {
  2.   created(el, binding, vnode, prevVnode) {}, // 新增
  3.   beforeMount() {},
  4.   mounted() {},
  5.   beforeUpdate() {}, // 新增
  6.   updated() {},
  7.   beforeUnmount() {}, // 新增
  8.   unmounted() {},
  9. };

提示：每个生命周期还是vue2.x的那4个参数

示例，现在我们准备自定义一个指令，用于设置亮状态下的字体颜色：

  1. // src/main.ts
  2. app.directive('highlight', {
  3.   mounted(el, binding, vnode) {
  4.     console.log(el, binding, vnode);
  5.     el.style.color = binding.value || 'orange';
  6.   },
  7. });

使用：

  1. <div class="app" v-highlight="'blue'">Hello, Vue3.x!</div>

四、总结

  • vue2.x自定义指令生命周期：bind → inserted → update → componentUpdated → unbind
  • vue3.x自定义指令生命周期：created → beforeMount → mounted → beforeUpdate → updated → beforeUnmount → unmounted
  • 都拥有的参数：el、binding、vnode、oldVnode，常用的为前三个。