vue组件内可直接通过directives选项定义局部指令，键为指令名（不带v-），值为含beforemount/mounted/updated/beforeunmount等钩子的对象；支持binding.value获取参数，推荐抽离依赖逻辑；需注意script setup中不可用该选项，且事件监听须在beforeunmount清理。
Vue 自定义指令可以在组件内部封装为局部指令，无需全局注册，适合特定组件内复用、逻辑耦合强或仅临时使用的场景。关键在于利用组件的 directives 选项声明，并在模板中以标准 v- 前缀调用。
如何在组件内定义局部指令
直接在组件的 directives 选项中声明一个对象，键为指令名（不带 v-），值为指令定义对象。Vue 3 中推荐使用生命周期对齐的钩子：beforeMount、mounted、updated、beforeUnmount。
- 指令定义可省略全部钩子，只写需要的（如只需初始化操作，只写
mounted即可） - 参数通过
binding.value获取，支持响应式数据、函数、对象等多种类型 - 若需访问组件实例（如调用方法或读取 props），可通过
vnode.context（Vue 2）或组合式 API 中的getCurrentInstance()（Vue 3），但更推荐将依赖逻辑抽离为工具函数传入
常见局部指令封装示例
比如封装一个“自动聚焦”指令，仅在当前表单组件内使用：
- 在
setup外或export default对象中定义：
mounted(el) {
el.focus();
}
};
- 在组件选项中注册：
directives: { focus: focusDirective },
// 其他选项...
};
- 模板中使用：
<input v-focus>
局部指令与全局指令的区别和选型建议
局部指令不污染全局命名空间，调试时作用域清晰，适合一次性、低复用率的 DOM 行为封装。
- 权限控制、复制、防抖点击等跨组件高频功能 → 优先全局注册
- 仅某几个表单页需要的输入框格式化、特殊校验提示 → 局部定义更轻量
- 指令内部依赖当前组件的 props 或 emit → 局部定义可自然访问上下文，避免额外传参
注意事项与避坑点
局部指令无法在 script setup 语法糖中直接通过 directives 选项注册（该选项在 setup 语法糖中不可用），必须改用 export default 普通对象写法。
- 指令中操作 DOM 时，确保元素已挂载（避免在
beforeMount中访问el.innerHTML） - 若指令需响应数据变化，应使用
updated钩子，并注意对比binding.value和binding.oldValue - 涉及事件监听（如 click、keydown）时，务必在
beforeUnmount中清理，防止内存泄漏
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
