Vue3 自定义指令完全指南
本指南将用通俗易懂的方式讲解Vue3自定义指令的核心概念、使用方法和实际应用场景， 帮助你扩展Vue的功能边界，解决特定场景下的开发需求。
指令是Vue模板中带有v-前缀的特殊属性，
如v-if、v-for等。
自定义指令
当内置指令不能满足需求时，可以创建自定义指令， 用于对DOM元素进行底层操作。
比如：自动聚焦输入框、权限控制、防抖等场景。
解决特定问题
封装需要直接操作DOM的逻辑，使其可以复用。
代码组织
将与DOM操作相关的代码集中管理，使组件更专注于业务逻辑。
抽象通用功能
如权限控制、输入框限制等可以抽象为指令，在多个项目中使用。
created
指令绑定到元素时调用（早于元素插入DOM）
beforeMount
元素插入DOM前调用
mounted
元素插入DOM后调用（最常用）
beforeUpdate
元素更新前调用
updated
元素更新后调用
beforeUnmount
元素卸载前调用
unmounted
元素卸载后调用
全局注册
在整个应用中可用
app.directive(‘focus’, {
mounted(el) {
el.focus()
}
})
局部注册
在当前组件内可用
directives: {
focus: {
mounted(el) {
el.focus()
}
}
}
}
每个钩子函数接收以下参数：
el
指令绑定的DOM元素
binding
包含以下属性的对象：
– value: 指令的值
– oldValue: 前一个值
– arg: 指令参数
– modifiers: 修饰符对象
– instance: 组件实例
vnode
绑定元素的虚拟节点
prevNode
上一个虚拟节点（仅在beforeUpdate和updated中可用）
自定义指令实战示例
以下是一些常用自定义指令的实际演示
mounted(el) {
el.focus();
}
});
mounted(el, binding) {
el.style.color = binding.value;
},
updated(el, binding) {
el.style.color = binding.value;
}
});
当前权限: {{ permissions }}
mounted(el, binding) {
const { arg } = binding;
if (!hasPermission(arg)) {
el.style.display = ‘none’;
}
}
});
使用自定义指令的注意事项
谨慎操作DOM
虽然指令可以直接操作DOM，但应避免过度使用，优先考虑Vue的响应式数据绑定。
指令名称
自定义指令名称应避免与原生HTML属性或Vue内置指令冲突，建议使用特定前缀（如：v-my-directive）。
更新处理
如果指令的值会动态变化，需要在updated钩子中处理更新逻辑。
避免副作用
指令应专注于与DOM相关的操作，避免在其中处理业务逻辑或数据修改。