在 Vue 中，组件负责“可见”的 UI，自定义指令则负责“不可见”的底层 DOM 行为。当你需要直接操作节点、监听第三方库、或封装浏览器原生 API 时，指令往往比组件更轻量、更灵活。Vue 为自定义指令设计了五条钩子函数，覆盖从首次绑定到最终解绑的完整生存周期。

一、bind：指令的“构造函数”

当指令第一次绑定到元素时触发，且只触发一次。

此时父节点可能尚未挂载到 DOM，因此不要在这里做需要获取父元素尺寸、位置的操作。

典型用途

• 注册全局事件（如 window.resize）
• 初始化第三方实例（如 new Sortable(el)）
• 设置一次性样式或属性

二、inserted：元素真正“落位”

当元素已经被插入父节点（哪怕父节点仍在内存中，尚未插入 document）时触发。

此时可以安全地读取 offsetParent、getBoundingClientRect 等信息。

典型用途

• 启动需要 DOM 位置的动画
• 实例化依赖父级布局的库（如 Popper.js）
• 聚焦输入框

三、update：数据变了，视图还没 patch 完

每当组件的 VNode 重新渲染时触发，不管绑定值是否真的改变。

如果你只想在值变化时执行逻辑，需要手动比较 binding.value 与 binding.oldValue。

典型用途

• 根据新值更新样式或文本
• 节流/防抖高频 DOM 操作

四、componentUpdated：整个组件已经 patch 完成

与 update 不同，此钩子在当前组件及其所有子组件的 DOM 更新周期结束后触发。

适合需要等待子节点渲染完毕再执行的场景。

典型用途

• 重新计算滚动容器高度
• 在子列表渲染后刷新第三方滚动条

五、unbind：指令的“析构函数”

当指令与元素解绑（元素被 v-if 移除、路由切换、手动销毁）时触发，且只触发一次。

务必在此清理所有副作用，防止内存泄漏。

典型用途

• 移除全局事件监听
• 销毁第三方实例
• 清除定时器

六、钩子参数速览

所有钩子都会收到统一的四个参数，按出场频率排序：

1.el

绑定到的真实 DOM 节点，可直接操作。

2.binding

一个对象，携带所有绑定信息：

• name：指令名（不含 v-）
• value：当前绑定值
• oldValue：上一次绑定值（仅在 update 和 componentUpdated 中）
• expression：字符串形式的表达式
• arg：指令参数，如 v-color:red 中的 red
• modifiers：修饰符对象，如 { prevent: true }

3.vnode

Vue 生成的虚拟节点，可访问 context、key 等元数据。

4.oldVnode

更新前的旧虚拟节点，仅在 update 和 componentUpdated 中可用。

实战示例：一个“可关闭提示”指令