当前位置：首页 > news >正文

Vue2/Vue3自定义指令

news 来源：原创 2025/5/1 17:57:15

Vue2 和 Vue3 都支持自定义指令，用于直接操作 DOM 元素。两者的实现方式类似，但在 Vue3 中，指令的生命周期钩子有所调整。以下是详细说明和示例：

1. Vue2 自定义指令

在 Vue2 中，自定义指令通过 Vue.directive 全局注册或组件内 directives 选项局部注册。

全局注册

Vue.directive('focus', {
  // 指令钩子
  inserted(el) {
    el.focus(); // 元素插入 DOM 时聚焦
  }
});

局部注册

export default {
  directives: {
    focus: {
      inserted(el) {
        el.focus();
      }
    }
  }
};

指令钩子

bind：指令第一次绑定到元素时调用（只调用一次）。
inserted：元素插入父节点时调用。
update：组件更新时调用（可能发生在子组件更新之前）。
componentUpdated：组件及其子组件全部更新后调用。
unbind：指令与元素解绑时调用。

2. Vue3 自定义指令

Vue3 中，自定义指令通过 app.directive 全局注册或组件内 directives 选项局部注册。指令的生命周期钩子有所调整。

全局注册

import { createApp } from 'vue';
const app = createApp(App);

app.directive('focus', {
  mounted(el) {
    el.focus(); // 元素插入 DOM 时聚焦
  }
});

app.mount('#app');

局部注册

export default {
  directives: {
    focus: {
      mounted(el) {
        el.focus();
      }
    }
  }
};

指令钩子

created：指令绑定到元素时调用（元素还未插入 DOM）。
beforeMount：元素插入 DOM 前调用。
mounted：元素插入 DOM 后调用。
beforeUpdate：组件更新前调用。
updated：组件及其子组件更新后调用。
beforeUnmount：元素卸载前调用。
unmounted：元素卸载后调用。

3. 示例：实现一个点击外部关闭的自定义指令

以下是一个常见的自定义指令示例：点击元素外部时触发回调。

Vue2 实现

Vue.directive('click-outside', {
  bind(el, binding, vnode) {
    el.clickOutsideEvent = function(event) {
      if (!(el === event.target || el.contains(event.target))) {
        binding.value(event); // 调用绑定的回调函数
      }
    };
    document.addEventListener('click', el.clickOutsideEvent);
  },
  unbind(el) {
    document.removeEventListener('click', el.clickOutsideEvent);
  }
});

Vue3 实现

app.directive('click-outside', {
  beforeMount(el, binding) {
    el.clickOutsideEvent = function(event) {
      if (!(el === event.target || el.contains(event.target))) {
        binding.value(event); // 调用绑定的回调函数
      }
    };
    document.addEventListener('click', el.clickOutsideEvent);
  },
  unmounted(el) {
    document.removeEventListener('click', el.clickOutsideEvent);
  }
});

使用

<template>
  <div v-click-outside="handleClickOutside">
    点击外部关闭
  </div>
</template>

<script>
export default {
  methods: {
    handleClickOutside() {
      console.log('点击了外部区域');
    }
  }
};
</script>

4. Vue2 和 Vue3 自定义指令的区别

特性	Vue2	Vue3
注册方式	`Vue.directive` 或 `directives` 选项	`app.directive` 或 `directives` 选项
生命周期钩子	`bind`, `inserted`, `update`, `componentUpdated`, `unbind`	`created`, `beforeMount`, `mounted`, `beforeUpdate`, `updated`, `beforeUnmount`, `unmounted`
钩子参数	`el`, `binding`, `vnode`, `oldVnode`	`el`, `binding`, `vnode`, `prevVnode`