当前位置：网站首页 > 技术文章 > 正文

Vue 3 进阶用法:自定义指令

zhezhongyun 2025-08-05 22:21 4 浏览

代码复用是一种美德。Vue 提供了多种手段保障代码复用：组件化是最基础的复用，组合式函数负责带状态的逻辑复用。而指令用于复用底层 DOM 元素的操作逻辑。

指令是相对小众的需求，因为 Vue 已通过“虚拟 DOM”等手段屏蔽了大部分直接的 DOM 操作。有些操作实在绕不过去，才使用指令实现。

Vue 开箱附赠了一些指令，比如 v-model、v-show 等。你也可以开发指令满足自己的定制化需求。

根据指令的注册位置，可以分为两大类：局部指令和全局指令。

一、局部指令

局部指令指的是在某个组件内部注册的指令。

在 <script setup> 中，任何以 v 开头的驼峰格式的变量都可以当作自定义指令。比如，vFocus 变量定义的指令，在模板中可以用作 v-focus。

二、全局指令

全局指令指的是在应用入口文件（一般为 main.js）中定义的指令。

使用 app.directive() 方法注册全局指令，所有组件可以直接使用。

三、指令钩子

指令提供了七个钩子函数，供你在组件的不同生命周期执行指令的代码。

钩子数量看起来挺多，但是大部分都是打酱油的，一般常用的只有 mounted 和 updated 两个。其他的五个钩子除了面试官，普通打工仔用的不多。

每个钩子函数的形参有四个，前两个用的比较多：el 和 binding。el 表示绑定指令的 DOM 元素，binding 包含详细的指令内容。

第三个参数 vnode 表示绑定元素的虚拟节点，其中包含的信息可以用于更加细粒度的控制。比如，在内置的 v-show 指令源码中，根据 vnode 的 transition 属性决定是否开启过渡动画。

第四个元素 prevVnode 表示上一次渲染时的虚拟节点。它仅在 beforeUpdate 和 updated 两个钩子中有值，其他函数中一律为 undefined。

binding 是一个对象，里面包含多个字段。各字段的含义如下：

value：传入指令的值
oldValue：传入治理的旧值，仅在 beforeUpdate 和 updated 中有值
arg：指令参数
modifiers：修饰符组成的对象
instance：使用指令的组件实例
dir：治理定义对象

写个例子感受一下主要参数对应的指令部分。

四、简写形式

如果一个指令只使用了 mounted 和 updated，并且两者的内容完全一样，可以使用指令的简写函数形式。

五、组件上的自定义指令

如果组件只有一个根节点，自定义指令会作用于这个根节点，就像《Vue 3 进阶用法：透传特性》的透传行为一样。

如果组件有多个根节点，自定义指令会失效，并被出示黄牌警告。

因此，没事不要在组件上使用自定义指令。除非忍不住。

参考资料

Custom Directives，https://vuejs.org/guide/reusability/custom-directives.html

完

transition 属性

上一篇：热血传奇:它属性均衡却只能沦为过渡装备，远不如同系列装备热门
下一篇：DNF三觉醒统统可用，究极能量套爽感拉满

Vue 3 进阶用法:自定义指令

一、局部指令

二、全局指令

三、指令钩子

四、简写形式

五、组件上的自定义指令

参考资料

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

接口测试遇到500报错?别慌，你的头部可能有点问题

Web前端需要学什么?Web前端开发需要学习哪些?

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

关于HTML5被简称做H5，你怎么看?（html5缩写）

现在页面实时聊天都使用Websocket技术实现吗?