📖 前言：为什么要关注自定义指令？

在日常开发中，你可能会遇到：

• 表单输入框需要在页面渲染后立即聚焦。
• 弹层必须在点击外部时自动关闭。
• 某些按钮只有特定角色才能看到。
• 拖拽/缩放/裁剪等高级交互无法用现成组件实现。

如果只靠普通组件或事件总能搞定，没必要写指令；但当需求跨越多处复用，又不想每次都写相同逻辑时自定义指令就成了合适方案。

一、什么是自定义指令？

自定义指令本质上是「带 v- 前缀的可复用 DOM 行为」。Vue 内置了 。,;当内置不足以满足业务需求时可以注册自己的指令。一个指令对象由若干“钩子函数”组成，Vue 在元素生命周期中按顺序调用它们。

使用方式：

高亮文本

1️⃣ 钩子函数

痛点提醒：  你是否曾经在“元素刚插入 DOM 时”执行代码。却发现还没真正挂载，导致报错？那是因为钩子选择错误，

钩子	调用时机说明
bind	第一次绑定到元素时调用，只调用一次。说起来，此时 DOM 尚未插入父节点。
inserted	被绑定元素插入父节点后调用。适合需要访问真实布局尺寸的场景。说起来，
update	所在组件 VNode 更新时触发。可能发生在其子 VNode 更新之前。按理说，值可能改变，也可能保持不变。
componentUpdated	所在组件及其子 VNode 全部更新后触发。在这里可以安全访问子节点状态。
unbind	与元素解绑时调用，只会执行一次用于清理副作用。

参数介绍 & 只读规则 ⚠️

• el:  DOM 元素，可直接操作；不是响应式对象，修改，也就是可影响页面但不要过度依赖它。
• binding:  只读快照对象，包含：
  • - name：指令名；按理说，
  • - value：绑定值；
  • - oldValue：上一次值，仅在 update / componentUpdated 可用；
  • - expression：字符串表达式；
  • - arg：传给指令的参数；
  • - modifiers：修饰符对象。
• vnode:  虚拟节点实例。
• oldVnode:  上一次虚拟节点，仅 update / componentUpdated 中可用。

"除 el 外其余参数均为只读。请勿修改"

全局注册方式

{{msg}}
// main.js
Vue.directive('focus',{
inserted { el.focus;}
})，怎么说呢，new Vue({
从el来看，'#app'。data:{msg:'Hello'}
})//-->

局部注册方式

{
directives:{
focus:{
inserted{el.focus;}
}
}
} //-->

完整示例 - 自动聚焦

完整示例 - 权限控制

完整示例 - 拖拽 + 修饰符

二、Vue 3 自定义指令概览

1️⃣ 钩子函数差异 & 对齐生命周期

inserted mounted 元素已插入父容器后回调；等价于旧版 inserted。新增 ​ // 元素自身 VNode 更新前 "关键点：" Vue 3 的 mounted ≈ Vue 2 的 inserted；beforeMount ≈ bind；拆分 update 为 beforeUpdate + updated 等，为迁移提供直观映射。"

⚙️ 钩子参数差异

• 'el':  DOM 节点同旧版。.
• 'binding': { instance。value,oldValue,arg,modifiers,dir } – 新增 instance和 dir，方便共享状态或访问数据源。.
• 'vnode': {虚拟节点}
• 'prevVnode': {上一次 vnode } – 替代旧版 oldVnode.
"✅ Vue 3 在 binding 中暴露了 instance 和 dir，便于跨钩子共享状态。" "⚠️ 除 el 外其余参数均为只读，请勿修改" "除 el 外其余参数均为只读。请勿修改"

全局 & 局部注册 💡

**全局注册**:

旧版	新版	说明
bind beforeMount 绑定到元素但尚未挂载至 DOM 时回调；老实说，于旧版 bind 的前置工作。

。

---