Vue自定义指令
Vue 自定义指令用于封装和复用直接面向 DOM 的低层行为。
#tech / dev / frame
#resource / vue3
#type / concept
#status / growing
[!info] related notes
- 所属 MOC: Vue MOC
- 主题入口: vue3
- 相关概念: vue3-lifecycle, vue3-dollar-event
- 相关实践: vue-print-next, vue-router-guards-and-permission-control
Vue自定义指令
Vue 自定义指令用来封装直接作用在 DOM 元素上的低层行为。它不是用来替代组件，也不是用来承载业务状态，而是当你必须“碰 DOM”时的一层复用机制。
一句话定义
自定义指令是 Vue 提供的 DOM 级扩展点，适合封装聚焦、权限控制、拖拽、打印这类元素行为。
它解决什么问题
- 把重复出现的 DOM 操作抽成可复用能力
- 避免在多个组件里反复写相似的挂载、更新、清理逻辑
- 让“和元素直接交互”的逻辑不必混进组件主体
什么时候适合用自定义指令
- 逻辑的核心对象是“某个 DOM 元素”
- 你需要在元素挂载、更新、卸载时接入行为
- 这段逻辑不适合抽成普通组件
例如：
- 自动聚焦
- 点击外部关闭
- 权限隐藏
- 打印某块区域
什么时候不适合用自定义指令
- 你真正要复用的是组件结构
- 你要解决的是状态共享或组件通信
- 你只是想复用普通 JavaScript 逻辑
这些场景通常更适合组件、组合式函数或状态管理。
一个典型例子
像 v-hasPermi 这类权限指令，本质是在元素挂载时判断当前用户是否具备权限，没有权限就隐藏或移除元素。
这个场景适合指令，是因为它关注的核心就是“这个 DOM 元素该不该显示”。
和组件、Composition API 的边界
- 组件：复用结构和交互界面
- Composition API：复用响应式状态和逻辑
- 自定义指令：复用直接面向 DOM 的行为
这三层不要混。
常见误区
把业务规则全塞进指令
指令适合承接 DOM 行为，不适合承接过重的业务编排。
把指令当成组件替代品
如果你需要复用一整块 UI 结构，优先还是组件。
忘记清理副作用
如果指令内部注册了事件监听或第三方实例，就要考虑更新和卸载时的清理。
和现有笔记的关系
- 组件层通信见 vue-component-communication
- 生命周期时机可结合 vue3-lifecycle 理解
- 打印类场景可参考 vue-print-next
最短记忆方式
Vue 自定义指令 = 给 DOM 元素附加可复用行为的机制。