在 Vue 3 中，自定义指令是一种强大的工具，它允许你对普通 DOM 元素进行底层操作，以实现一些特殊的交互效果或功能。下面将详细介绍 Vue 3 自定义指令的相关内容，包括基本用法、指令钩子函数、传参以及全局和局部自定义指令的使用。
基本用法
自定义指令可以在组件内部局部注册，也可以在应用实例中全局注册。指令名通常采用 kebab-case（短横线分隔）的命名方式。
局部自定义指令
在组件内部使用 directives 选项来注册局部自定义指令。
<template><input v-focus />
</template><script setup>
// 局部自定义指令
const vFocus = {// 指令钩子函数，在元素挂载后执行mounted(el) {// 让元素获取焦点el.focus()}
}
</script>
在上述代码中，定义了一个名为 v-focus 的局部自定义指令，当绑定该指令的元素挂载到 DOM 后，会自动获取焦点。
全局自定义指令
在应用实例中使用 app.directive 方法来注册全局自定义指令，这样在整个应用中都可以使用该指令。
javascript">import { createApp } from 'vue'
import App from './App.vue'const app = createApp(App)// 全局自定义指令
app.directive('focus', {mounted(el) {el.focus()}
})app.mount('#app')
在 main.js 中注册了全局的 v-focus 指令，之后在任何组件中都能使用该指令。
指令钩子函数
自定义指令有多个钩子函数，用于在不同阶段执行操作。以下是各个钩子函数及其执行时机：
beforeMount：在元素挂载到 DOM 之前调用。mounted：在元素挂载到 DOM 之后调用。beforeUpdate：在元素更新之前调用，发生在虚拟 DOM 打补丁之前。updated：在元素更新之后调用，发生在虚拟 DOM 打补丁之后。beforeUnmount：在元素卸载之前调用。unmounted：在元素卸载之后调用。
<template><div v-color="'red'">This is a colored div.</div>
</template><script setup>
const vColor = {beforeMount(el, binding) {// 在元素挂载前设置样式el.style.color = binding.value},mounted(el) {console.log('Element is mounted.')},beforeUpdate() {console.log('Element is about to update.')},updated() {console.log('Element has been updated.')},beforeUnmount() {console.log('Element is about to unmount.')},unmounted() {console.log('Element has been unmounted.')}
}
</script>
在这个例子中，v-color 指令在不同的生命周期阶段执行相应的操作，并且通过 binding.value 获取指令传递的参数。
指令传参
指令可以接收参数，参数通过指令绑定表达式传递，在钩子函数中可以通过 binding 对象获取。
<template><div v-color="'blue'" v-size="24">Styled div</div>
</template><script setup>
const vColor = {mounted(el, binding) {el.style.color = binding.value}
}const vSize = {mounted(el, binding) {el.style.fontSize = `${binding.value}px`}
}
</script>
在上述代码中，v-color 指令接收一个颜色值作为参数，v-size 指令接收一个字体大小值作为参数，在 mounted 钩子函数中使用 binding.value 获取这些参数并应用到元素上。
动态指令参数
指令的参数可以是动态的，通过在模板中使用 JavaScript 表达式来实现。
<template><div :[dynamicDirective]="dynamicValue">Dynamic directive</div>
</template><script setup>
import { ref } from 'vue'const dynamicDirective = ref('color')
const dynamicValue = ref('green')const vColor = {mounted(el, binding) {el.style.color = binding.value}
}
</script>
这里 dynamicDirective 和 dynamicValue 都是响应式的，当它们的值发生变化时，指令会相应地更新。
通过上述方法，你可以在 Vue 3 中灵活地创建和使用自定义指令，满足各种复杂的交互和功能需求。
