1. 前言

在 Vue3 的開發生態中，自定義指令是一項極為靈活且強大的功能，它允許開發者對 DOM 元素進行底層操作，實現復用性高的特定邏輯。結合 TypeScript（TS）強類型的特性，能讓自定義指令的開發更加規范、安全，減少運行時錯誤。本文將深入講解基于 Vue3 + TS 的自定義指令開發，并通過實際的業務場景做一些示例。?

2. 基礎概念與優勢?

在 Vue 中，指令（Directives）是以v-為前綴的特殊屬性，用于在模板中實現對 DOM 的操作。除了 Vue 自帶的指令（如v-bind、v-on），開發者還可以根據業務需求創建自定義指令。自定義指令的核心作用是抽象出可復用的 DOM 操作邏輯，將其封裝在指令中，在不同組件中重復使用，從而提高代碼的復用性和開發效率。?

Vue3 + TS 開發自定義指令的優勢?：

• 類型安全：TypeScript 的強類型系統能在開發階段就檢測出類型不匹配等錯誤，避免因數據類型問題導致的運行時錯誤。例如，在定義指令的鉤子函數參數類型時，明確的類型聲明能讓開發者更清晰地知道每個參數的用途和數據類型，同時在編輯器中獲得智能提示，提升編碼效率。?

• 代碼規范與維護性：TS 的類型定義和接口約束，能讓代碼結構更加清晰。團隊成員可以通過類型聲明快速理解代碼意圖，降低代碼維護成本。在大型項目中，統一的類型規范有助于保持代碼風格的一致性，減少溝通成本。?

• 更好的代碼重構支持：當項目需求變更，需要對自定義指令進行重構時，TS 強大的類型檢查機制能幫助開發者快速定位因代碼修改導致的類型錯誤，確保重構后的代碼邏輯正確，降低重構風險。?

3. Vue3+TS自定義指令的創建與注冊?

下面是一個完整的流程示例：

3.1. 創建自定義指令?

在 Vue3 中，使用app.directive方法來注冊自定義指令。結合 TS，我們可以通過定義接口和類型別名來規范指令的參數和鉤子函數。

以下是一個簡單的示例，創建一個自定義指令v-focus，用于在元素插入 DOM 時自動獲取焦點：?
?

import { App, Directive, DirectiveBinding } from 'vue';?
?
// 定義指令鉤子函數的參數類型?
interface FocusDirectiveBinding extends DirectiveBinding {?value: boolean;?
}?
?
// 創建自定義指令?
const focusDirective: Directive<HTMLElement, FocusDirectiveBinding> = {?// 當指令綁定到元素時調用?mounted(el: HTMLElement, binding: FocusDirectiveBinding) {?if (binding.value) {?el.focus();?}?}?
};?
?
export default focusDirective;?

在上述代碼中：?

• 首先導入了App、Directive和DirectiveBinding等類型，用于定義指令相關的類型和接口。?
• 接著定義了FocusDirectiveBinding接口，擴展了DirectiveBinding，明確了指令綁定值value的類型為boolean。?
• 然后創建了focusDirective，它是一個實現了Directive接口的對象，包含了mounted鉤子函數。在mounted鉤子中，根據binding.value的值判斷是否讓元素獲取焦點。?

3.2. 注冊自定義指令?

注冊自定義指令有兩種方式：全局注冊和局部注冊。?

全局注冊：在main.ts文件中，將自定義指令注冊到整個 Vue 應用中，使其在所有組件中都可用。?

import { createApp } from 'vue';?
import App from './App.vue';?
import focusDirective from './directives/focus';?
?
const app = createApp(App);?
app.directive('focus', focusDirective);?
app.mount('#app');?

局部注冊：在組件內部注冊自定義指令，僅在當前組件及其子組件中生效。?

	<template>?<input v-focus="isFocused" type="text" />?</template>??<script lang="ts">?import { defineComponent } from 'vue';?import focusDirective from '../directives/focus';??export default defineComponent({?directives: {?focus: focusDirective?},?data() {?return {?isFocused: true?};?}?});?
</script>

4. 實際場景示例?

下面列舉了幾個使用例子，都是開發過程中會碰到的典型示例。

4.1. 權限指令控制?

在企業級應用中，經常需要根據用戶的權限來控制某些 DOM 元素的顯示或隱藏。例如，只有管理員用戶才能看到刪除按鈕，普通用戶則隱藏該按鈕。?

import { App, Directive, DirectiveBinding } from 'vue';?
?
// 定義權限指令的綁定值類型?
interface PermissionDirectiveBinding extends DirectiveBinding {?value: string[];?
}?
?
// 創建權限指令?
const permissionDirective: Directive<HTMLElement, PermissionDirectiveBinding> = {?mounted(el: HTMLElement, binding: PermissionDirectiveBinding) {?const userPermissions = ['admin']; // 模擬用戶權限列表?const requiredPermissions = binding.value;?if (!userPermissions.some(p => requiredPermissions.includes(p))) {?el.style.display = 'none';?}?}?
};?
?
export default permissionDirective;?

在模板中使用該指令：?

<template>?<button v-permission="['admin']">刪除</button>?
</template>

4.2. 圖片懶加載指令?

在圖片較多的頁面，使用懶加載可以提升頁面加載性能。通過自定義指令實現圖片的懶加載功能：?

import { App, Directive, DirectiveBinding } from 'vue';?
import { IntersectionObserver } from '@w3c/IntersectionObserver';?
?
// 定義懶加載指令的綁定值類型?
interface LazyLoadDirectiveBinding extends DirectiveBinding {?value: string;?
}?
?
// 創建懶加載指令?
const lazyLoadDirective: Directive<HTMLImageElement, LazyLoadDirectiveBinding> = {?mounted(el: HTMLImageElement, binding: LazyLoadDirectiveBinding) {?const observer = new IntersectionObserver(([entry]) => {?if (entry.isIntersecting) {?el.src = binding.value;?observer.unobserve(el);?}?});?observer.observe(el);?}?
};?
?
export default lazyLoadDirective;?

在模板中使用該指令：?

<template>?<img v-lazy-load="imageUrl" alt="懶加載圖片" />?
</template>

5. 優化與注意事項?

• 緩存 DOM 操作：在指令的鉤子函數中，如果涉及多次對 DOM 元素的相同操作，可以將結果緩存起來，避免重復計算，提升性能。例如，在計算元素的位置或尺寸時，可以將結果存儲在變量中，后續使用時直接讀取。?

• 事件解綁：在unmounted鉤子函數中，要記得解綁在mounted鉤子中添加的事件監聽器，防止內存泄漏。比如在上述懶加載指令中，使用IntersectionObserver觀察元素時，在元素不再需要觀察時，調用unobserve方法解除觀察。?

• 指令參數類型檢查：在指令的鉤子函數中，要對傳入的參數進行嚴格的類型檢查和合法性驗證，避免因參數錯誤導致的異常。例如，在權限指令中，確保binding.value是一個數組類型，并且數組元素是字符串類型。?

• 指令命名規范：自定義指令的命名要遵循一定的規范，建議采用v-前綴加上有意義的名稱，方便團隊成員理解和使用。同時，命名要避免與 Vue 自帶的指令或項目中已有的指令沖突。?

---

本次分享就到這兒啦，我是鵬多多，如果您看了覺得有幫助，歡迎評論，關注，點贊，轉發，我們下次見~

往期文章

• vue中ref的詳解以及react的ref對比
• css使用aspect-ratio制作4:3和9:16和1:1等等比例布局
• Web前端頁面開發阿拉伯語種適配指南
• flutter-使用extended_image操作圖片的加載和狀態處理以及緩存和下載
• flutter-制作可縮放底部彈出抽屜評論區效果
• flutter-實現Tabs吸頂的PageView效果
• Vue2全家桶+Element搭建的PC端在線音樂網站
• 助你上手Vue3全家桶之Vue3教程
• 超詳細！vue組件通信的10種方式
• 超詳細！Vuex手把手教程
• 使用nvm管理node.js版本以及更換npm淘寶鏡像源
• vue中利用.env文件存儲全局環境變量，以及配置vue啟動和打包命令

個人主頁

• CSDN
• GitHub
• 掘金