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 自定义指令的区别 特性Vue2Vue3注册方式Vue.directive 或 directives 选项app.directive 或 directives 选项生命周期钩子bind, inserted, update, componentUpdated, unbindcreated, beforeMount, mounted, beforeUpdate, updated, beforeUnmount, unmounted钩子参数el, binding, vnode, oldVnodeel, binding, vnode, prevVnode

---

5. 总结

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

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

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