Vue 自定义指令_vue 自定义指令把参数传出去

myzbx 2025-09-14 23:24 5 浏览

在 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 中可用。

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

DOM 动画

上一篇：使用Trae做一个简单的天狗食日动画效果试试
下一篇：一个非常棒的 JS 动画引擎库_js动画插件

Vue 自定义指令_vue 自定义指令把参数传出去

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

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

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

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

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

六、钩子参数速览

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

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

8.7k star，一款超炫酷的动态可视化大屏项目

说下你的vue项目的目录结构，该怎么划分?

这么牛逼的cursor功能，赶紧用起来

用上Vue3，你真的变了吗?（vue3 key）

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

20个免费音乐音效下载网站，无版权素材商业影片也可用