Vue 自定义指令详解

张

张建站

2026/5/15 4:26:51

10分钟阅读

Vue 自定义指令详解一、核心概念1.内置指令和自定义指令2. 作用和原理二、注册方式1. 全局注册 (app.directive)2. 局部注册 (directives 选项)三、指令钩子函数 (生命周期)1.触发时机2.常用钩子说明四、钩子函数参数五、功能强大的示例1. 带参数和修饰符的焦点指令2. 图片懒加载指令3. 权限控制指令 (简化版)六、函数简写七、对象字面量八、使用建议九、总结Vue 的自定义指令允许开发者注册可复用的指令直接作用于DOM 元素。它们是操作底层 DOM 的理想选择适用于需要直接与元素交互的场景如聚焦输入框、添加事件监听器、实现懒加载等。一、核心概念1.内置指令和自定义指令内置指令:v-model,v-show,v-if,v-for等。自定义指令: 开发者根据需求创建的以v-开头的指令用于封装特定的 DOM 操作逻辑。2. 作用和原理作用封装DOM操作/事件逻辑复用交互行为如聚焦、拖拽避免组件内直接操作DOM。原理通过指令名如v-focus绑定到元素响应生命周期钩子或值变化。二、注册方式1. 全局注册 (app.directive)在应用实例上注册所有组件均可使用。import{createApp}fromvueconstappcreateApp({})// 注册一个全局自定义指令 v-focusapp.directive(focus,{// 指令的钩子函数mounted(el){el.focus()// 聚焦元素}})2. 局部注册 (directives选项)在组件内部注册仅当前组件可用。template input v-focus / /template script export default { directives: { focus: { mounted(el) { el.focus() } } } } /script三、指令钩子函数 (生命周期)1.触发时机自定义指令提供了多个钩子函数在不同阶段执行钩子触发时机参数created指令绑定到元素后立即调用仅 Vue 3。在beforeMount之前。el, binding, vnode, prevVnodebeforeMount元素挂载前调用Vue 2中相当于bindel, binding, vnodemounted元素挂载后调用最常用el, binding, vnodebeforeUpdate元素更新前调用仅 Vue 3el, binding, vnode, prevVnodeupdated元素更新后调用Vue 2中相当于componentUpdatedel, binding, vnode, prevVnodebeforeUnmount元素卸载前调用仅 Vue 3相当于 Vue 2 的unbindel, binding, vnodeunmounted元素卸载后调用清理工作在此进行el, binding, vnode注意: Vue 2 使用bind,inserted,update,componentUpdated,unbind。Vue 3 统一为上述名称。2.常用钩子说明mounted: 最常用的钩子。元素已插入父 DOM可以安全地进行 DOM 操作如聚焦、初始化第三方库。unmounted: 必须在此处清理资源如移除事件监听器、清除定时器、销毁第三方实例防止内存泄漏。四、钩子函数参数每个钩子函数接收以下参数el: 指令绑定的元素。可以直接操作 DOM。binding: 一个对象包含以下属性value: 传递给指令的值。v-my-directive1 1则binding.value为2。oldValue: 更新前的值仅beforeUpdate和updated钩子中可用。arg: 指令的参数。v-my-directive:arg则binding.arg为arg。modifiers: 包含修饰符的对象。v-my-directive.mod1.mod2则binding.modifiers为{ mod1: true, mod2: true }。instance: 使用该指令的组件实例。dir: 指令的定义对象。vnode: 绑定元素对应的虚拟节点。prevVnode: 上一个虚拟节点仅beforeUpdate和updated中可用。五、功能强大的示例1. 带参数和修饰符的焦点指令app.directive(focus, { mounted(el, binding) { const { value, arg, modifiers } binding if (value) { // 只有值为真时才聚焦 el.focus() // 参数: 指定延迟时间 if (arg) { const delay parseInt(arg) setTimeout(() gt; el.focus(), delay) } // 修饰符: select 表示聚焦后全选文本 if (modifiers.select) { el.select() } } }, unmounted(el) { // 清理如果有必要 } })input v-focus:500.selectshouldFocus / !-- shouldFocus 为 true 时: - 延迟 500ms 后聚焦 - 聚焦后自动全选文本内容 --2. 图片懒加载指令app.directive(lazy, { mounted(el, binding) { // 创建 IntersectionObserver 实例 const observer new IntersectionObserver((entries) gt; { entries.forEach(entry gt; { if (entry.isIntersecting) { // 元素进入视口加载真实图片 el.src binding.value // 加载完成后停止观察 observer.unobserve(el) } }) }) // 开始观察元素 observer.observe(el) // 将 observer 存储在元素上便于后续清理 el._lazyObserver observer }, unmounted(el) { // 卸载时必须断开观察防止内存泄漏 if (el._lazyObserver) { el._lazyObserver.disconnect() delete el._lazyObserver } } })img v-lazyimageSrc altLazy Image /3. 权限控制指令 (简化版)// 假设有一个全局的权限检查函数 function hasPermission(permission) { // 返回用户是否有该权限 return userPermissions.includes(permission) } app.directive(permission, { mounted(el, binding) { const requiredPerm binding.value if (!hasPermission(requiredPerm)) { // 移除没有权限的元素 el.parentNode amp;amp; el.parentNode.removeChild(el) // 或者隐藏: el.style.display none } } })button v-permissiondelete_user删除用户/button !-- 如果用户无 delete_user 权限按钮将被移除 --六、函数简写如果mounted和updated钩子逻辑相同可以简写为一个函数。app.directive(color, (el, binding) gt; { // 等同于在 mounted 和 updated 钩子中执行 el.style.color binding.value })p v-colorred这段文字是红色的/p七、对象字面量如果你的指令需要多个值你可以向它传递一个 JavaScript 对象字面量。别忘了指令也可以接收任何合法的 JavaScript 表达式。template div v-demo{ color: white, text: hello! }/divapp.directive(demo,(el,binding){console.log(binding.value.color)// whiteconsole.log(binding.value.text)// hello!})八、使用建议命名: 使用有意义的、动词性的名字如v-focus,v-lazy,v-tooltip。清理资源: 在unmounted钩子中务必清理所有副作用事件监听器、定时器、观察器等。避免复杂逻辑: 指令应专注于 DOM 操作。复杂的业务逻辑应放在组件或 Composition API 中。类型安全 (TypeScript): 可以通过模块扩展为自定义指令提供类型提示。// augment.d.ts import { Directive } from vue declare module vue { export interface Directives { focus: Directive lazy: Directive } }九、总结Vue 自定义指令是操作原生 DOM 的强大工具。何时使用: 当需要直接、低级别的 DOM 操作且该操作具有通用性时。核心: 掌握钩子函数和参数(el,binding)。关键: 在unmounted钩子中进行资源清理防止内存泄漏。趋势: 在 Vue 3 Composition API 和 Teleport 等新特性下部分传统指令场景如模态框有了更现代的解决方案但指令在聚焦、懒加载、权限等场景依然不可替代。

AI编程伙伴Cursor高效使用指南：从提示词工程到实战工作流

1. 项目概述：一个关于Cursor的“使用说明书”如果你是一名开发者，最近几个月一定在各种技术社区、社交媒体上频繁听到“Cursor”这个名字。它不再仅仅是一个代码编辑器，而是被许多人称为“AI驱动的编程伙伴”。我最初接触Cursor，也…...

2026/5/15 4:26:51 阅读更多 →

如何在云环境中实现EdgeDB的最佳实践与性能优化

如何在云环境中实现EdgeDB的最佳实践与性能优化【免费下载链接】edgedb Gel supercharges Postgres with a modern data model, graph queries, Auth & AI solutions, and much more. 项目地址: https://gitcode.com/gh_mirrors/ed/edgedb EdgeDB作为一款现代化的数…...

2026/5/15 4:24:12 阅读更多 →

omlx：一站式机器学习模型部署工具，打通模型落地最后一公里

1. 项目概述：一个为机器学习模型部署而生的“瑞士军刀”如果你在机器学习领域摸爬滚打过一段时间，尤其是在模型训练完成、准备将其投入实际应用时，大概率会遇到一个共同的痛点：“模型部署的最后一公里”。训练好的模型文件&#x…...

2026/5/15 4:16:38 阅读更多 →

2026年AI大模型API中转平台排名揭晓，诗云API(ShiyunApi)脱颖而出成省心之选

在AI开发领域，如何接入模型厂商的官方API是一个绕不开的现实问题。对于海外开发者来说，注册、绑卡、调用，三步即可轻松搞定。然而，国内开发者却面临着跨境网络波动、外币支付门槛、发票合规需求以及多厂商Key碎片化管理等诸多“非…...

2026/5/14 15:34:04 阅读更多 →

CANN/catlass TLA张量详解

TLA Tensors 【免费下载链接】catlass 本项目是CANN的算子模板库，提供NPU上高性能矩阵乘及其相关融合类算子模板样例。项目地址: https://gitcode.com/cann/catlass 本文介绍 TLA 中的 Tensor。如果说 Layout 负责描述“逻辑坐标如何映射到内存”&#xf…...

2026/5/15 4:35:33 阅读更多 →

LinkSwift：解锁九大网盘高速下载的终极浏览器脚本解决方案

LinkSwift：解锁九大网盘高速下载的终极浏览器脚本解决方案【免费下载链接】Online-disk-direct-link-download-assistant 一个基于 JavaScript 的网盘文件下载地址获取工具。基于【网盘直链下载助手】修改 ，支持百度网盘 / 阿里云盘 / 中国移动云盘 / …...

2026/5/15 1:45:17 阅读更多 →