Vue 自定义指令

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

一、bind:指令的"构造函数"

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

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

典型用途

  • 注册全局事件(如 window.resize
  • 初始化第三方实例(如 new Sortable(el)
  • 设置一次性样式或属性
js 复制代码
bind(el, binding) {
  el.__onResize = () => { /* ... */ }
  window.addEventListener('resize', el.__onResize)
}

二、inserted:元素真正"落位"

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

此时可以安全地读取 offsetParentgetBoundingClientRect 等信息。

典型用途

  • 启动需要 DOM 位置的动画
  • 实例化依赖父级布局的库(如 Popper.js
  • 聚焦输入框
js 复制代码
inserted(el) {
  el.focus()
}

三、update:数据变了,视图还没 patch 完

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

如果你只想在值变化时执行逻辑,需要手动比较 binding.valuebinding.oldValue

典型用途

  • 根据新值更新样式或文本
  • 节流/防抖高频 DOM 操作
js 复制代码
update(el, binding) {
  if (binding.value !== binding.oldValue) {
    el.style.color = binding.value
  }
}

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

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

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

典型用途

  • 重新计算滚动容器高度
  • 在子列表渲染后刷新第三方滚动条
js 复制代码
componentUpdated(el) {
  el.scrollTop = el.scrollHeight
}

五、unbind:指令的"析构函数"

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

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

典型用途

  • 移除全局事件监听
  • 销毁第三方实例
  • 清除定时器
js 复制代码
unbind(el) {
  window.removeEventListener('resize', el.__onResize)
  el.__onResize = null
}

六、钩子参数速览

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

  1. el

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

  2. binding

    一个对象,携带所有绑定信息:

    • name:指令名(不含 v-
    • value:当前绑定值
    • oldValue:上一次绑定值(仅在 updatecomponentUpdated 中)
    • expression:字符串形式的表达式
    • arg:指令参数,如 v-color:red 中的 red
    • modifiers:修饰符对象,如 { prevent: true }
  3. vnode

    Vue 生成的虚拟节点,可访问 contextkey 等元数据。

  4. oldVnode

    更新前的旧虚拟节点,仅在 updatecomponentUpdated 中可用。

实战示例:一个"可关闭提示"指令

js 复制代码
export default {
  bind(el, { value }) {
    el.style.position = 'relative'
    el.innerHTML += '<span class="close">×</span>'
    el.__close = el.querySelector('.close')
    el.__handler = () => el.remove()
    el.__close.addEventListener('click', el.__handler)
  },
  unbind(el) {
    el.__close.removeEventListener('click', el.__handler)
  }
}
相关推荐
不如摸鱼去3 分钟前
从 Wot UI 出发谈 VSCode 插件的自动化发布
前端·vscode·开源·自动化
IT_陈寒1 小时前
Python开发者必看:这5个鲜为人知的Pandas技巧让你的数据处理效率提升50%
前端·人工智能·后端
豆苗学前端1 小时前
写给女朋友的第一封信,测试方法概论
前端·后端·设计模式
半桶水专家1 小时前
Vue 3 插槽(Slot)详解
前端·javascript·vue.js
袁煦丞1 小时前
本地AI绘画神器+全局访问——Stable Diffusion WebUI 成功突破:cpolar内网穿透实验室第462个成功挑战
前端·程序员·远程工作
一枚前端小能手1 小时前
🏗️ JavaScript类深度解析 - 从构造函数到现代特性的完整指南
前端·javascript
袁煦丞1 小时前
家用NAS+云盘自由NanoPi R4S+iStoreOS:cpolar内网穿透实验室第460个成功挑战
前端·程序员·远程工作
浏览器API调用工程师_Taylor2 小时前
日报自动化实战:告别手动复制粘贴
前端·javascript·node.js
晴殇i2 小时前
JavaScript还能这样写?!ES2025新语法让代码优雅到极致
前端·javascript·程序员
浏览器API调用工程师_Taylor2 小时前
我是如何将手动的日报自动化的☺️☺️☺️
前端·javascript·爬虫