Vue 3 是一个非常强大的前端框架，它不仅提供了简单易用的 API，还支持多种高级功能，以便开发者根据需要扩展和优化应用。在 Vue 中，自定义指令是一种非常灵活的功能，它允许我们为 DOM 元素添加特定的行为，扩展 Vue 的模板语法。
在这篇博客中，我们将深入探讨 Vue 3 中的自定义指令，介绍如何创建、注册和使用自定义指令，帮助你更好地掌握这一功能。
什么是自定义指令？
在 Vue 中，指令是用来对 DOM 元素进行低级操作的一种机制。内置指令（如 v-if、v-for 等）提供了常见的 DOM 操作，但当内置指令不能满足需求时，Vue 允许开发者定义自己的自定义指令。
自定义指令通常用来直接操作 DOM 元素或添加额外的行为（比如自动聚焦、滚动监听等）。
自定义指令的基本语法
创建一个自定义指令非常简单，Vue 3 通过 app.directive() 方法注册全局指令，而在组件内部，可以通过 directives 选项注册局部指令。
app.directive('focus', {
mounted(el) {
el.focus(); // 自动聚焦元素
}
});这个简单的示例展示了如何创建一个 v-focus 指令，它会在元素挂载到 DOM 后自动聚焦。
1. 全局注册自定义指令
在 Vue 3 中，全局注册自定义指令非常简单。你可以在应用的入口文件中使用 app.directive() 方法来注册指令，这样注册的指令在整个应用中都可以使用。
示例：全局注册 focus 指令
// main.js 或 main.ts 文件
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
// 注册全局指令
app.directive('focus', {
mounted(el) {
el.focus(); // 元素挂载后自动聚焦
}
});
app.mount('#app');在上述代码中，我们通过 app.directive('focus', {...}) 注册了一个全局指令 focus，然后在整个应用中可以使用 v-focus 来自动聚焦。
使用全局指令
在组件中，我们可以直接使用这个指令：
<template>
<input v-focus />
</template>何时使用全局注册？
全局注册适用于在多个组件中都需要用到相同指令的场景。通过全局注册，我们只需在一个地方定义指令，所有组件都可以共享它。
2. 局部注册自定义指令
除了全局注册指令，Vue 3 还允许我们在单个组件内局部注册指令。这样，你可以限制指令的使用范围，只在需要的组件中生效。
示例：局部注册 focus 指令
export default {
directives: {
focus: {
mounted(el) {
el.focus(); // 元素挂载后自动聚焦
}
}
}
};通过这种方式，指令 v-focus 仅在当前组件内有效。局部注册的指令不会影响其他组件，因此它们在功能上更加专注和模块化。
使用局部指令
<template>
<input v-focus />
</template>何时使用局部注册？
局部注册适合于只在某个特定组件中使用的指令。它提供了更好的封装和模块化，避免了不必要的全局注册。
3. 指令钩子函数
Vue 自定义指令提供了一些生命周期钩子函数，允许开发者在不同的时机执行特定操作。以下是常用的指令钩子：
created(el, binding): 在指令创建时调用，此时元素还未插入 DOM。beforeMount(el, binding): 在元素插入 DOM 之前调用。- mounted(el, binding): 元素插入 DOM 后调用，通常用于操作 DOM 或初始化元素。
beforeUpdate(el, binding): 在绑定值更新之前调用。- updated(el, binding): 在绑定值更新后调用。
beforeUnmount(el, binding): 在指令所在组件卸载之前调用。unmounted(el, binding): 在指令所在组件卸载之后调用。
示例：使用多个钩子函数
app.directive('focus', {
created(el) {
console.log('指令创建');
},
beforeMount(el) {
console.log('元素即将挂载');
},
mounted(el) {
console.log('元素已挂载');
el.focus(); // 元素挂载后自动聚焦
},
beforeUnmount(el) {
console.log('指令即将卸载');
},
unmounted(el) {
console.log('指令已卸载');
}
});通过这些钩子函数，我们可以在指令生命周期的不同阶段进行操作。这为开发者提供了更大的灵活性。
4. 简化的指令写法
在 Vue 3 中，你可以通过简化指令的注册方式，减少不必要的代码。例如，如果指令只需要在****mounted 钩子中执行简单的 DOM 操作，你可以省略 created 和 beforeMount 等钩子，直接在指令注册时定义简单的行为。
示例：简化形式
app.directive('focus', (el) => {
el.focus(); // 直接在 `mounted` 钩子中执行
});这种简化的方式非常适合于那些只涉及简单 DOM 操作的指令。Vue 3 会自动将这个方法视为 mounted 钩子的简化形式。
5. 使用 setup 注册指令
在 <script setup> 中，任何以 v 开头的驼峰式命名的变量都可以当作自定义指令使用 。在例子中，vHighlight 可以在模板中以 v-highlight 的形式使用。
<script setup>
// 在模板中启用 v-highlight
const vHighlight = {
mounted: (el) => {
el.classList.add('is-highlight')
}
}
</script>
<template>
<p v-highlight>This sentence is important!</p>
</template>总结
Vue 3 的自定义指令功能非常强大，能够帮助我们轻松扩展 Vue 的模板语法，操作 DOM，甚至添加自定义的行为。我们可以通过全局注册或局部注册的方式来使用自定义指令，而指令钩子则提供了丰富的生命周期管理能力。
无论是用于简单的 DOM 操作（如自动聚焦）还是复杂的交互行为（如滚动监听、拖拽等），Vue 3 的自定义指令都能为我们提供强大的支持。