vue.js自定义指令生命周期钩子按执行顺序精准对应dom挂载、更新与卸载阶段；vue 3含created、beforemount、mounted、beforeupdate、updated、beforeunmount、unmounted共7个钩子，vue 2含bind、inserted、update、componentupdated、unbind共5个钩子，参数统一为el、binding（含value/arg/modifiers等）、vnode/oldvnode。
Vue.js 自定义指令的生命周期由多个钩子函数组成，它们精准对应 DOM 元素在组件中的挂载、更新与卸载阶段；参数则统一通过四个形参传递，核心是 el（真实 DOM 元素）和 binding（含 value、arg、modifiers 等信息的对象）。
Vue 3 指令生命周期钩子
Vue 3 提供 7 个标准钩子，按执行顺序依次为：
- created：指令绑定后立即触发，此时元素尚未挂载，适合初始化逻辑（如缓存 setup 数据），但不能操作 DOM
- beforeMount：元素即将插入 DOM 前调用，可读取或预设属性，仍不可依赖父容器布局
- mounted：最常用钩子，DOM 已挂载完成，可安全聚焦、测量尺寸、绑定事件
- beforeUpdate：组件更新前触发，适用于需在子组件重绘前干预的场景
- updated：整个组件 VNode 及其子节点更新完毕后调用，适合同步 DOM 状态，但应避免修改响应式数据以防循环
- beforeUnmount：元素卸载前执行，推荐在此清理定时器、取消网络请求或移除事件监听
- unmounted：指令彻底解绑后触发，常用于释放外部资源（如第三方库实例）
Vue 2 指令生命周期钩子
Vue 2 使用 5 个钩子，命名和语义略有差异：
- bind：指令第一次绑定时调用，等效于 Vue 3 的 created + beforeMount 组合，但无法访问完整 DOM 结构
- inserted：元素已插入父节点（不保证在 document 中），可执行 focus() 或简单 DOM 操作
- update：所在组件 VNode 更新时触发，可能早于子组件更新，适合轻量级同步
- componentUpdated：组件及全部子组件更新完成后调用，功能接近 Vue 3 的 updated
- unbind：指令解绑时调用，对应 Vue 3 的 beforeUnmount + unmounted 合并职责
参数详解：el、binding、vnode、oldVnode
所有钩子函数都接收相同结构的参数，其中：
-
el：原生 DOM 元素，可直接调用
el.focus()、el.addEventListener()等原生 API -
binding 是关键数据载体，包含：
•value：指令绑定的值（如v-focus="true"中的 true）
•oldValue：仅在 update/componentUpdated 中可用，用于比对变化
•arg：指令参数（如v-model:prop中的 prop）
•modifiers：修饰符对象（如v-click.prevent.stop→{ prevent: true, stop: true }）
•expression：原始绑定表达式字符串（如"user.name"） - vnode 和 oldVnode：虚拟节点对象，仅在 update 和 componentUpdated（Vue 2）或 updated/beforeUpdate（Vue 3）中提供，用于深度比对或调试，一般业务中较少直接使用
注册方式：全局 vs 局部
注册方式影响指令作用域，需按需选择：
-
全局注册：
• Vue 3：使用app.directive('focus', { mounted(el) { el.focus() } })
• Vue 2：使用Vue.directive('focus', { inserted(el) { el.focus() } }) -
局部注册：
• Vue 3（组合式 API）：在setup()中通过directives选项声明
• Vue 2（选项式 API）：在组件配置中添加directives: { focus: { inserted() {...} } }
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
