企业官网建设流程全解析

Vue 3 深入学习笔记 11：自定义指令与 DOM 行为封装

一、为什么需要自定义指令？

在 Vue 中，可以从三个角度理解常见的复用方式：

自定义指令尤其适合那些需要直接操作 DOM 元素的场景。

例如：

• 页面打开后，输入框自动获得焦点。
• 点击某个元素外部时关闭面板。
• 为元素添加或移除事件监听器。
• 根据需要设置原生 DOM 属性。

二、自定义指令是不是相当于添加 listener？

可以这样理解一部分场景，但自定义指令不等于添加事件监听器。

例如，下面这段代码直接添加了一个事件监听器：

consthandler=(event)=>{console.log('点击了页面',event)}document.addEventListener('click',handler)

而自定义指令可以把添加监听器、保存处理函数以及卸载时清理监听器等操作统一封装起来：

constvClickOutside={mounted(el,binding){consthandler=(event)=>{if(!el.contains(event.target)){binding.value()}}document.addEventListener('click',handler)el.__clickOutsideHandler__=handler},unmounted(el){document.removeEventListener('click',el.__clickOutsideHandler__)deleteel.__clickOutsideHandler__}}

因此，更准确的理解是：自定义指令是 Vue 提供的一种 DOM 行为封装机制；添加 listener 只是它能完成的事情之一。

三、从最简单的自定义指令开始

1. 自动聚焦

如果只有一个输入框需要自动聚焦，可以直接在组件中实现：

<script setup> import { onMounted, ref } from 'vue' const inputRef = ref(null) onMounted(() => { inputRef.value?.focus() }) </script> <template> <input ref="inputRef" /> </template>

如果很多组件都有相同需求，就可以封装成自定义指令：

<script setup> const vFocus = { mounted(el) { el.focus() } } </script> <template> <input v-focus /> </template>

这里的el就是绑定指令的原生 DOM 元素。mounted在元素挂载到 DOM 后执行，所以可以在这里调用focus()。

注意：这个例子没有添加任何 listener，但它仍然是自定义指令。因此，自定义指令并不等于事件监听器。

2. 限制输入框最大长度

<script setup> const vMaxLength = { mounted(el, binding) { el.maxLength = binding.value }, updated(el, binding) { el.maxLength = binding.value } } </script> <template> <input v-max-length="20" /> </template>

binding.value是传入的值，这里是20。如果绑定值会变化，可以在updated钩子中同步更新 DOM 属性。

四、自定义指令的生命周期

例如：

constvFocus={mounted(el){el.focus()}}

最常用的两个钩子是：

• mounted：执行初始化 DOM 行为，例如聚焦、添加事件监听器。
• unmounted：执行清理，例如移除事件监听器、释放相关资源。

五、指令绑定参数 binding

自定义指令的钩子通常会收到el、binding等参数。

例如：

<input v-example:foo.bar="message" />

对应关系：

binding.arg// 'foo'binding.modifiers// { bar: true }binding.value// message 的当前值

指令可以通过binding.value接收函数，因此组件可以把行为交给指令执行：

<div v-click-outside="closePanel"> 面板内容 </div>

其中closePanel是组件中的函数，指令检测到点击发生在元素外部时，就可以调用它。

六、实战：点击元素外部时关闭面板

这是下拉菜单、弹出面板等 UI 中常见的需求。

<script setup> import { ref } from 'vue' const visible = ref(true) function closePanel() { visible.value = false } const vClickOutside = { mounted(el, binding) { const handler = (event) => { if (!el.contains(event.target)) { binding.value() } } document.addEventListener('click', handler) el.__clickOutsideHandler__ = handler }, unmounted(el) { document.removeEventListener( 'click', el.__clickOutsideHandler__ ) delete el.__clickOutsideHandler__ } } </script> <template> <div v-if="visible" v-click-outside="closePanel"> 这是一个面板 </div> </template>

关键点

1. document.addEventListener('click', handler)：监听整个文档的点击事件。
2. el.contains(event.target)：判断点击目标是否位于当前元素内部。
3. binding.value()：调用组件传入的关闭函数。
4. document.removeEventListener(...)：移除监听器，避免元素卸载后监听器仍然存在。

示例中的el.__clickOutsideHandler__是为了演示而使用的自定义 DOM 属性。实际项目可以使用WeakMap保存元素与事件处理函数的对应关系，避免给 DOM 元素增加自定义属性。

更稳妥的事件处理思路

如果使用WeakMap保存处理函数，可以这样写：

consthandlers=newWeakMap()constvClickOutside={mounted(el,binding){consthandler=(event)=>{if(!el.contains(event.target)){binding.value()}}handlers.set(el,handler)document.addEventListener('click',handler)},unmounted(el){consthandler=handlers.get(el)if(handler){document.removeEventListener('click',handler)handlers.delete(el)}}}

注意：这仍然是用于理解原理的简化实现。实际项目还需要考虑点击触发按钮与面板关闭之间的事件顺序、事件冒泡、键盘操作和无障碍访问等问题。

七、局部注册与全局注册

1. 局部注册

在<script setup>中，按vXxx的形式定义变量即可在模板中使用对应的v-xxx指令：

<script setup> const vFocus = { mounted(el) { el.focus() } } </script> <template> <input v-focus /> </template>

2. 全局注册

如果多个页面都需要使用某个指令，可以在应用初始化时注册：

import{createApp}from'vue'importAppfrom'./App.vue'constapp=createApp(App)app.directive('focus',{mounted(el){el.focus()}})app.mount('#app')

之后组件可以直接使用：

<input v-focus />

建议只有确实需要跨页面复用的指令才全局注册，避免全局指令过多而难以维护。

八、组件、Composable、自定义指令的选择

可以用下面这几个问题判断：

• 是否需要封装一套 UI 结构和交互？优先考虑组件。
• 是否需要复用响应式状态、计算逻辑或业务流程？优先考虑 Composable。
• 是否需要直接操作 DOM，且这种行为需要在多个元素或页面复用？可以考虑自定义指令。

例如：

九、自定义指令的设计原则

1. 优先使用 Vue 原生能力。能通过v-if、v-show、v-model或组件属性实现的需求，不必强行使用指令。
2. 指令主要负责 DOM 行为。不要把复杂业务流程、接口请求和业务状态管理都塞进指令。
3. 及时清理副作用。在mounted中注册的事件监听器，通常需要在unmounted中移除。
4. 考虑绑定值更新。如果指令依赖的绑定值会变化，需要根据场景在updated等钩子中同步行为。
5. 避免不必要的直接 DOM 操作。如果通过 Vue 的响应式状态和模板就能清楚表达需求，通常应优先使用 Vue 的声明式写法。

十、课后练习与参考答案

练习 1：自动聚焦

实现一个v-focus指令，要求元素挂载后自动获得焦点。

参考答案：

constvFocus={mounted(el){el.focus()}}

使用方式：

<input v-focus />

练习 2：禁止重复点击

实现一个v-throttle-click指令，让按钮点击后在指定时间内不能再次触发点击事件。

参考答案思路：

指令在mounted时为元素添加点击监听器，并记录上次触发时间；在unmounted时移除监听器。下面是一个简单示例：

constclickHandlers=newWeakMap()constvThrottleClick={mounted(el,binding){constdelay=Number(binding.arg)||1000letlocked=falseconsthandler=(event)=>{if(locked)returnlocked=truebinding.value(event)setTimeout(()=>{locked=false},delay)}clickHandlers.set(el,handler)el.addEventListener('click',handler)},unmounted(el){consthandler=clickHandlers.get(el)if(handler){el.removeEventListener('click',handler)clickHandlers.delete(el)}}}

使用方式：

<button v-throttle-click:1000="submitForm"> 提交 </button>

这里的1000表示锁定时间为 1000 毫秒。该示例用于理解指令的结构；实际项目应进一步考虑绑定函数更新、异常时解锁、组件卸载时定时器清理，以及“节流”和“防重复提交”并不完全相同等问题。对于真正的提交防重，通常还应在业务逻辑层设置提交状态，不能只依赖 DOM 指令。

练习 3：权限控制

实现一个v-permission指令，传入当前用户权限和所需权限，不满足条件时移除对应元素。

参考答案思路：

简单的 DOM 移除示例：

constvPermission={mounted(el,binding){const{userPermissions,requiredPermission}=binding.valueif(!userPermissions.includes(requiredPermission)){el.remove()}}}

使用方式：

<button v-permission="{ userPermissions: permissions, requiredPermission: 'user:delete' }" > 删除用户 </button>

需要注意：el.remove()会把元素从 DOM 中移除。如果权限状态可能在页面运行期间变化，单纯在mounted中判断并不够，还需要设计更新处理或改用响应式模板条件。前端权限控制只影响界面展示，不是后端授权的替代品。后端仍必须校验用户是否有执行操作的权限。

练习 4：方案选择

判断下面的需求更适合组件、Composable，还是自定义指令，并说明原因。

• A. 封装一个支持搜索、分页和排序的表格。
• B. 封装一套可以在多个页面复用的搜索请求逻辑。
• C. 封装一个点击元素外部就关闭的行为。

参考答案：

• A：优先使用组件，因为它需要封装 UI 结构和交互；如果搜索、分页状态逻辑也很复杂，可以进一步抽到 Composable。
• B：优先使用 Composable，因为核心是复用响应式状态和请求逻辑，而不是 UI。
• C：可以使用自定义指令封装 DOM 事件行为；如果关闭逻辑只服务于某个组件，也可以直接写在该组件内部，不必为了抽象而抽象。

十一、本节核心面试题

1. 什么是 Vue 3 自定义指令？它主要解决什么问题？

参考答案：

自定义指令是 Vue 提供的一种封装 DOM 层面行为的机制，适合处理需要直接操作原生 DOM 的场景。

常见用途包括：

• 输入框自动聚焦。
• 点击元素外部时关闭面板。
• 添加或移除 DOM 事件监听器。
• 动态设置原生 DOM 属性。

例如：

<script setup> const vFocus = { mounted(el) { el.focus() } } </script> <template> <input v-focus /> </template>

这里的el就是绑定指令的原生 DOM 元素，mounted钩子在元素挂载后执行，因此可以调用focus()。

需要注意：自定义指令不等于添加事件监听器。自动聚焦和设置 DOM 属性也可以通过自定义指令实现。

2. 组件、Composable 和自定义指令有什么区别？

参考答案：

三者的主要区别在于封装对象不同。

选择时可以问自己三个问题：

• 是否需要封装一套 UI 结构和交互？优先考虑组件。
• 是否需要复用响应式状态或业务逻辑？优先考虑 Composable。
• 是否需要复用直接操作 DOM 的行为？可以考虑自定义指令。

例如，复杂表格适合使用组件，搜索请求逻辑适合使用 Composable，而点击面板外部时关闭面板可以考虑使用自定义指令。

如果某个 DOM 行为只服务于一个简单组件，直接写在组件中也完全合理。

3. Vue 3 自定义指令有哪些生命周期钩子？最常用的是哪些？

参考答案：

Vue 3 自定义指令提供以下生命周期钩子：

最常用的是：

• mounted：初始化 DOM 行为，例如自动聚焦、注册事件监听器。
• updated：当指令依赖的绑定值变化时，根据需要同步更新 DOM 行为。
• unmounted：清理副作用，例如移除事件监听器。

例如，指令在mounted中添加了全局事件监听器，通常就应该在unmounted中移除。

4. 自定义指令中的el和binding分别是什么？

参考答案：

el是绑定指令的原生 DOM 元素，binding则包含指令的绑定信息。

常见的binding属性包括：

例如：

<input v-example:foo.bar="message" />

对应的信息是：

binding.arg// 'foo'binding.modifiers// { bar: true }binding.value// message 当前对应的值

指令也可以通过binding.value接收组件传入的函数：

<div v-click-outside="closePanel"> 面板内容 </div>

当检测到点击发生在元素外部时，指令就可以调用binding.value()执行组件提供的关闭逻辑。

5. 如何实现一个v-click-outside指令？为什么必须清理事件监听器？

参考答案：

可以在元素挂载时监听document的点击事件，判断点击目标是否位于当前元素之外；如果在外部，就调用组件传入的函数。

consthandlers=newWeakMap()constvClickOutside={mounted(el,binding){consthandler=(event)=>{if(!el.contains(event.target)){binding.value()}}handlers.set(el,handler)document.addEventListener('click',handler)},unmounted(el){consthandler=handlers.get(el)if(handler){document.removeEventListener('click',handler)handlers.delete(el)}}}

使用方式：

<div v-click-outside="closePanel"> 面板内容 </div>

其中：

• document.addEventListener()：监听文档点击事件。
• el.contains(event.target)：判断点击目标是否在当前元素内部。
• binding.value()：调用组件传入的回调函数。
• document.removeEventListener()：移除监听器。

使用WeakMap可以保存 DOM 元素与事件处理函数的对应关系，不必额外向 DOM 元素添加自定义属性。

必须清理监听器的原因：如果元素已经卸载，但全局监听器仍然存在，就可能继续执行无效逻辑，造成资源浪费或意外行为。

实际项目中还需要考虑绑定回调更新、点击触发按钮与面板关闭之间的事件顺序，以及键盘操作和无障碍访问等问题。

6. 如何实现一个会随绑定值变化而更新的自定义指令？

参考答案：

如果指令绑定的值可能发生变化，就可以根据需求在updated钩子中同步 DOM 属性或行为。

例如，限制输入框的最大长度：

<script setup> const vMaxLength = { mounted(el, binding) { el.maxLength = binding.value }, updated(el, binding) { el.maxLength = binding.value } } </script> <template> <input v-max-length="maxLength" /> </template>

这里：

• mounted：初始化maxLength。
• updated：组件更新后，将最新的绑定值同步到 DOM。

如果绑定值从20变为10，指令就可以将输入框的最大长度更新为10。

不过，并不是所有指令都需要实现updated。如果指令的行为只需要初始化一次，例如简单的自动聚焦，就可以只使用mounted。

7. 自定义指令应该如何注册？局部注册和全局注册有什么区别？

参考答案：

Vue 3 自定义指令有局部注册和全局注册两种常见方式。

局部注册：

在<script setup>中，按照vXxx的命名形式定义指令：

<script setup> const vFocus = { mounted(el) { el.focus() } } </script> <template> <input v-focus /> </template>

全局注册：

在应用初始化时使用app.directive()：

import{createApp}from'vue'importAppfrom'./App.vue'constapp=createApp(App)app.directive('focus',{mounted(el){el.focus()}})app.mount('#app')

之后，组件就可以直接使用v-focus。

两种方式的主要区别是使用范围：

• 局部注册：适合只在特定组件中使用的指令。
• 全局注册：适合确实需要在多个页面或组件中复用的指令。

不必将所有指令都注册为全局指令，以免增加全局维护成本。

8. 自定义指令有哪些设计原则和常见误区？

参考答案：

设计自定义指令时，需要注意以下几点：

第一，优先使用 Vue 原生能力。

如果通过v-if、v-show、v-model或组件属性就能清晰地实现需求，就不必强行使用自定义指令。

第二，指令主要负责 DOM 行为。

不应把复杂的业务流程、接口请求和业务状态管理全部塞进指令。

第三，及时清理副作用。

例如，在mounted中注册的事件监听器，通常需要在unmounted中移除。

第四，考虑绑定值更新。

如果指令依赖的值会发生变化，需要根据场景在updated等钩子中同步更新行为。

第五，避免不必要的直接 DOM 操作。

如果通过 Vue 的响应式状态和模板就能完成需求，通常应优先使用声明式写法。

核心原则是：自定义指令应解决明确的 DOM 行为复用问题，而不是替代组件、Composable 或 Vue 的响应式机制。

9. 如何实现一个简单的防重复点击指令？为什么不能只依赖指令防止重复提交？

参考答案：

可以通过自定义指令监听按钮点击事件，并在指定时间内阻止重复触发。

例如：

constclickHandlers=newWeakMap()constvThrottleClick={mounted(el,binding){constdelay=Number(binding.arg)||1000letlocked=falseconsthandler=(event)=>{if(locked)returnlocked=truetry{binding.value(event)}finally{setTimeout(()=>{locked=false},delay)}}clickHandlers.set(el,handler)el.addEventListener('click',handler)},unmounted(el){consthandler=clickHandlers.get(el)if(handler){el.removeEventListener('click',handler)clickHandlers.delete(el)}}}

使用方式：

<button v-throttle-click:1000="submitForm"> 提交 </button>

这里的1000表示锁定时间为 1000 毫秒。

不过，这只是简化示例。实际项目还应处理定时器清理、绑定函数更新等问题，并明确区分节流和防重复提交。

不能只依赖指令防止重复提交，因为定时锁定只是限制一段时间内的点击行为，并不一定与异步请求的真实状态一致。

对于表单提交，更稳妥的方式通常是在业务逻辑中维护submitting状态，并在请求完成后恢复状态。真正的数据安全仍应由后端根据业务规则保障。

10. 权限控制适合用自定义指令实现吗？有哪些注意事项？

参考答案：

可以使用自定义指令实现简单的 DOM 展示控制，但需要结合需求判断是否合适。

例如：

constvPermission={mounted(el,binding){const{userPermissions,requiredPermission}=binding.valueif(!userPermissions.includes(requiredPermission)){el.remove()}}}

使用方式：

<button v-permission="{ userPermissions: permissions, requiredPermission: 'user:delete' }" > 删除用户 </button>

如果用户没有对应权限，指令就会移除该元素。

但需要注意：

1. el.remove()会直接从 DOM 中移除元素。
2. 如果权限状态可能变化，只在mounted中判断是不够的，还需要设计更新处理。
3. 如果使用响应式模板条件或权限组件就能清晰实现需求，通常应优先考虑这些方案。
4. 前端权限控制只能控制界面展示，不能替代后端授权校验。

即使按钮在前端被隐藏，后端仍然必须验证当前用户是否有权执行对应操作。