一、前言

在 Vue 開發中，指令（Directives） 是一種非常強大的特性，它允許我們以聲明式的方式操作 DOM。Vue 提供了一些常用的內置指令，如 v-if、v-show、v-bind、v-on 等，同時也支持開發者根據需求創建自己的自定義指令。

本文將帶你全面了解 Vue 中的指令系統，包括：

• 常用內置指令的使用
• 自定義指令的定義與注冊
• 指令的生命周期鉤子函數
• 實際應用場景與案例分析

二、Vue 內置指令介紹

1. 條件渲染指令

• v-if：根據表達式的真假決定是否渲染元素。
• v-else?/?v-else-if：配合?v-if?使用，實現多條件判斷。
• v-show：通過 CSS 的?display?屬性控制元素顯示/隱藏。

<h1 v-if="isLoggedIn">歡迎回來！</h1>
<h1 v-else>請先登錄。</h1>

2. 列表渲染指令

• v-for：用于循環渲染列表數據。

<ul><li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>

3. 數據綁定指令

• v-bind：動態綁定屬性值，常用縮寫為?:attr="value"。

<img :src="imageUrl" alt="圖片">
<a :href="linkUrl">點擊我</a>

• v-model：實現表單控件與組件狀態的雙向綁定。

<input type="text" v-model="username">
<p>你輸入的用戶名是：{{ username }}</p>

4. 事件綁定指令

• v-on：監聽 DOM 事件并執行對應的方法，常用縮寫為?@event="handler"。

<button @click="submitForm">提交</button>
<input @keyup.enter="search" placeholder="按回車搜索">

5. 其他常用指令

• v-text：更新元素的文本內容，會覆蓋已有內容。
• v-html：插入 HTML 字符串（注意 XSS 風險）。
• v-pre：跳過編譯過程，直接顯示原始內容。
• v-once：只渲染一次，后續不再更新。

三、自定義指令的使用

雖然 Vue 提供了很多實用的內置指令，但有時我們需要一些特定功能來操作 DOM 或增強組件行為，這時就可以使用自定義指令。

1. 定義一個自定義指令

Vue 2.x 示例：

// main.js
Vue.directive('highlight', {bind(el, binding, vnode) {el.style.backgroundColor = binding.value;}
});

Vue 3 Composition API 示例：

// main.js
const app = createApp(App)app.directive('highlight', {beforeMount(el, binding) {el.style.backgroundColor = binding.value;}
})app.mount('#app')

2. 在模板中使用

<p v-highlight="'yellow'">這段文字會被高亮顯示</p>

3. 指令的參數說明

每個指令都有一個回調對象，包含以下屬性：

屬性名	描述
el	當前綁定的 DOM 元素
binding	包含指令的所有信息的對象，如?value,?oldValue,?arg,?modifiers?等
vnode	虛擬節點
prevNode	之前的虛擬節點（Vue 3）

四、指令的生命周期鉤子函數（Vue 3）

在 Vue 3 中，自定義指令有如下可用的鉤子函數：

鉤子函數	觸發時機
beforeMount	指令第一次綁定到元素時調用（之前叫?bind）
mounted	元素被插入到父節點時調用（之前叫?inserted）
beforeUpdate	所在組件即將更新時調用（之前叫?update）
updated	所在組件更新后調用（之前叫?componentUpdated）
beforeUnmount	元素即將解綁時調用（之前叫?unbind）
unmounted	元素已解綁時調用

五、實戰應用：創建幾個實用的自定義指令

? 指令一：自動聚焦指令?v-focus

適用于頁面加載或彈窗打開時自動聚焦某個輸入框。

app.directive('focus', {mounted(el) {el.focus()}
})

使用：

<input v-focus placeholder="自動獲取焦點">

? 指令二：權限控制指令?v-permission

可用于根據用戶角色控制某些按鈕或菜單的顯示。

app.directive('permission', {mounted(el, binding) {const userRoles = ['admin', 'editor'];if (!userRoles.includes(binding.value)) {el.parentNode.removeChild(el); // 移除無權限的元素}}
})

使用：

<button v-permission="'admin'">管理員操作</button>

? 指令三：節流防抖指令?v-throttle?/?v-debounce

防止高頻觸發事件（如滾動、輸入等），提升性能。

app.directive('throttle', {mounted(el, binding) {let timer = null;el.addEventListener('scroll', () => {if (!timer) {binding.value(); // 執行傳入的方法timer = setTimeout(() => timer = null, 300);}});}
});

使用：

<div v-throttle="onScroll">滾動區域</div>

六、最佳實踐與注意事項

場景	推薦做法
不要濫用指令	優先使用組件化、響應式數據處理邏輯
盡量避免直接操作 DOM	Vue 的核心思想是數據驅動視圖
指令應保持輕量	復雜邏輯建議封裝成方法或組件
注意內存泄漏	在 unmounted 鉤子中清理定時器、事件監聽等資源
Vue 3 中替代過濾器	可結合指令 + 方法進行格式化輸出

七、結語

感謝您的閱讀！如果你有任何疑問或想要分享的經驗，請在評論區留言交流！