长宁区网站建设设全网营销培训

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

---

5. 总结

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

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

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