理解Vue2.x和Vue3.x自定义指令用法及钩子函数原理

下面详细讲解“理解Vue2.x和Vue3.x自定义指令用法及钩子函数原理”的完整攻略。自定义指令是Vue框架中提供的一种高级功能，可以用于改变DOM元素的行为，例如为元素添加过渡效果、鼠标经过时高亮等。vue2.x和vue3.x中自定义指令的实现方式有所不同，下面分别介绍。

Vue2.x自定义指令

自定义指令定义方法

在Vue2.x中，我们可以使用Vue.directive()方法来定义自定义指令。Vue.directive()方法需要传入两个参数，第一个参数是指令的名称，第二个参数是一个对象，包含了directive的生命周期函数等。

//自定义全局指令
Vue.directive("my-directive", {
  //指令绑定时触发
  bind: function(el, binding, vnode) {},
  //指令插入到DOM节点时触发
  inserted: function(el, binding, vnode) {},
  //指令所在节点更新时触发
  update: function(el, binding, vnode, oldVnode) {},
  //指令所在节点组件更新时触发
  componentUpdated: function(el, binding, vnode, oldVnode) {},
  //指令解绑时触发
  unbind: function(el, binding, vnode) {}
});

//自定义局部指令
new Vue({
  directives: {
    "my-directive": {
      //指令绑定时触发
      bind: function(el, binding, vnode) {},
      //指令插入到DOM节点时触发
      inserted: function(el, binding, vnode) {},
      //指令所在节点更新时触发
      update: function(el, binding, vnode, oldVnode) {},
      //指令所在节点组件更新时触发
      componentUpdated: function(el, binding, vnode, oldVnode) {},
      //指令解绑时触发
      unbind: function(el, binding, vnode) {}
    }
  }
});

钩子函数说明

bind：指令第一次绑定到元素时调用，只调用一次，并且可以在这里进行初始化设置。

具体参数：
- el：指令所绑定的元素，可以用来操作DOM。
- binding：一个对象，包含指令的信息，例如指令绑定的值等。
- vnode：Vue编译生成的虚拟节点。

inserted：当被绑定的元素插入到DOM中时调用。

update：被绑定元素的属性或其它相关DEOM内容更新时调用。

具体参数：
- el：指令所绑定的元素，可以用来操作DOM。
- binding：一个对象，包含指令的信息，例如指令绑定的值等。
- vnode：Vue编译生成的虚拟节点。
- oldVnode：上一个虚拟节点，比较更新前后的状态。

componentUpdated：被绑定元素所在的组件的VNode及其子VNode全部更新后调用。

具体参数：
- el：指令所绑定的元素，可以用来操作DOM。
- binding：一个对象，包含指令的信息，例如指令绑定的值等。
- vnode：新的虚拟节点。
- oldVnode：旧的虚拟节点。

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

示例说明

下面是一个自定义指令，可以为DOM元素添加点击事件，并输出点击的坐标。

Vue.directive("click-position", {
  bind: function(el, binding, vnode) {
    //定义一个点击事件处理函数
    function clickHandler(event) {
      //触发点击事件时输出坐标
      console.log(`x:${event.clientX}, y:${event.clientY}`);
    }
    //绑定点击事件处理函数
    el.addEventListener("click", clickHandler);
  },
  unbind: function(el, binding, vnode) {
    //解绑点击事件处理函数
    el.removeEventListener("click", clickHandler);
  }
});

在HTML中使用该指令：

<div v-click-position>点击我</div>

点击<div>时，console输出点击坐标。

Vue3.x自定义指令

自定义指令定义方法

在Vue3.x中，我们使用Vue.directive()方法来定义自定义指令。Vue.directive()方法需要传入两个参数，第一个参数是指令的名称，第二个参数是一个对象，包含了directive的生命周期函数等。

import {directive} from "vue";

//定义自定义指令
const myDirective = directive("my-directive", {
  //指令绑定时触发
  mounted(el, binding, vnode) {},
  //指令所在节点更新时触发
  updated(el, binding, vnode, oldVnode) {},
  //指令解绑时触发
  unmounted(el, binding, vnode) {}
});

钩子函数说明

mounted：指令第一次绑定到元素时，从这里开始初始化设置，只调用一次。

updated：被绑定元素的属性或其它相关DEOM内容更新时调用。

unmounted：指令与元素解绑时调用。

示例说明

下面是一个自定义指令，可以为DOM元素添加点击事件，并输出点击的坐标。

import {directive} from "vue";

//定义自定义指令
const clickPositionDirective = directive("click-position", {
  //指令第一次绑定到元素时调用
  mounted(el, binding, vnode) {
    //定义一个点击事件处理函数
    function clickHandler(event) {
      //触发点击事件时输出坐标
      console.log(`x:${event.clientX}, y:${event.clientY}`);
    }
    //绑定点击事件处理函数
    el.addEventListener("click", clickHandler);
  },
  //指令所在节点更新时调用
  updated(el, binding, vnode, oldVnode) {},
  //指令解绑时调用
  unmounted(el, binding, vnode) {
    //解绑点击事件处理函数
    el.removeEventListener("click", clickHandler);
  }
});

在HTML中使用该指令：