Vue2/Vue3自定义指令

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 自定义指令的区别

5. 总结

• Vue2 和 Vue3 的自定义指令功能类似，但 Vue3 的生命周期钩子更细粒度。

• Vue3 的指令钩子名称更贴近组件生命周期（如 mounted 替代 inserted）。

• 自定义指令适合处理 DOM 操作（如聚焦、点击外部、拖拽等），但应避免过度使用，优先考虑组件化设计。