一、介紹

在Vue3中，自定義指令為開發(fā)者提供了一種靈活的方式來擴(kuò)展Vue的HTML模板語法，使其能夠執(zhí)行特定的DOM操作或組件邏輯。不同于Vue2.x中的全局和局部指令注冊(cè)方式，Vue3引入了Composition API，這使得自定義指令的編寫和使用更為直觀和簡(jiǎn)潔。

二、創(chuàng)建自定義指令

1. 全局自定義指令

在Vue3中，我們首先需要通過app.directive()方法來注冊(cè)全局自定義指令：

// 導(dǎo)入createApp和其他必要的庫
import { createApp } from 'vue';// 定義全局自定義指令
const focusDirective = {mounted(el) {el.focus();}
};// 創(chuàng)建并配置應(yīng)用實(shí)例
const app = createApp(App);// 注冊(cè)全局自定義指令
app.directive('focus', focusDirective);// 掛載應(yīng)用
app.mount('#app');

上述代碼定義了一個(gè)名為focus的全局指令，當(dāng)指令綁定到元素時(shí)，會(huì)在該元素掛載完成后自動(dòng)獲取焦點(diǎn)。

2. 局部自定義指令

在單個(gè)組件內(nèi)部，我們可以直接在組件選項(xiàng)的directives對(duì)象中定義和注冊(cè)局部指令：

<template><input v-focus />
</template><script>
import { defineComponent, onMounted } from 'vue';export default defineComponent({directives: {focus: {mounted(el) {onMounted(() => {// 防抖優(yōu)化，避免頻繁調(diào)用el.focus()setTimeout(() => {el.focus();});});}}}
});
</script>

這里我們同樣定義了一個(gè)focus指令，但它只在當(dāng)前組件內(nèi)有效。為了實(shí)現(xiàn)防抖效果（debounce），我們?cè)?code>mounted鉤子中使用了onMounted函數(shù)結(jié)合setTimeout來延遲調(diào)用el.focus()。

3. 指令參數(shù)與生命周期鉤子

除了mounted鉤子外，自定義指令還可以有其他生命周期鉤子，例如beforeMount、updated和unmounted等。每個(gè)指令接收四個(gè)參數(shù)：el（綁定元素）、binding（包含指令信息的對(duì)象，如值、修飾符等）、vnode（虛擬節(jié)點(diǎn)）和prevVnode（上一個(gè)虛擬節(jié)點(diǎn)，在更新鉤子中可用）。

4. 使用修飾符和動(dòng)態(tài)參數(shù)

指令可以接受修飾符和動(dòng)態(tài)參數(shù)，例如：

<input v-my-directive.modifier="value" />

在指令處理器中可以通過binding.arg訪問到指令名后的參數(shù)，通過binding.modifiers訪問修飾符。

{mounted(el, binding) {if (binding.modifiers.myModifier) {// 處理myModifier修飾符邏輯}const paramValue = binding.value; // 訪問動(dòng)態(tài)傳入的值}
}

三、實(shí)戰(zhàn)案例 - Input自動(dòng)聚焦

讓我們看一個(gè)實(shí)際的小demo，它使用自定義指令讓Input框在渲染后自動(dòng)獲取焦點(diǎn)：

// 全局注冊(cè)
app.directive('auto-focus', {mounted(el) {el.focus();}
});// 或者在組件內(nèi)部注冊(cè)
directives: {autoFocus: {mounted(el) {el.focus();}}
}// 在模板中使用
<input v-auto-focus />

通過以上步驟，我們就成功地在Vue3.2項(xiàng)目中實(shí)現(xiàn)了自定義指令的創(chuàng)建和使用，從而增強(qiáng)了Vue的靈活性和可定制性。