什麼是指令（directive）

在Angular和Vue中都有Directive的概念，我們通常講Directive 翻譯為“指令”。

在計算機技術中，指令是由指令集架構定義的單個的CPU操作。在更廣泛的意義上，“指令”可以是任何可執行程式的元素的表述，例如位元組碼。

那麼在前端框架Vue中“指令”到底是什麼，他有什麼作用呢？

在Vue開發中我們在模板中經常會使用v-model和v-show等以v-開頭的關鍵字，這些關鍵字就是Vue框架內建的指令。通過使用v-model，可以獲取實現DOM和資料的繫結；使用v-show，可以控制DOM元素顯示。簡而言之通過使用這些模板上的標籤，讓框架對DOM元素進行了指定的處理，同時DOM改變後框架可以同時更新指定資料。指令是Vue MVVM的基礎之一。

指令的使用場景

除了使用內建的指令，Vue同樣支援自定義指令，以下場景可以考慮通過自定義指令實現：

DOM的基礎操作，當元件中的一些處理無法用現有指令實現，可以自定義指令實現。例如元件水印，自動focus。相對於用ref獲取DOM操作，封裝指令更加符合MVVM的架構，M和V不直接互動。

<p v-highlight="'yellow'">Highlight this text bright yellow</p>

多元件可用的通用操作，通過使用元件（Component）可以很好的實現複用，同樣通過使用元件也可以實現功能在元件上的複用。例如拼寫檢查、圖片懶載入。使用元件，只要在需要拼寫檢查的輸入元件上加上標籤，遍可為元件注入拼寫檢查的功能，無需再針對不同元件封裝新的支援拼寫功能呢。

Vue 3如何自定義指令

Vue支援全域性註冊和區域性註冊指令。

全域性註冊註冊通過app例項的directive方法進行註冊。

let app = createApp(App)
app.directive('highlight',{
beforeMount(el,binding,vnode) {
el.style.background = binding.value
}
})

區域性註冊通過給元件設定directive屬性註冊

export default defineComponent({
name: "WebDesigner",components: {
Designer,},directives: {
highlight: {
beforeMount(el,vnode) {
el.style.background = binding.value;
},});

註冊元件包含元件的名字，需要唯一和元件的一個實現物件，組冊後即可在任何元素上使用了。

<p v-highlight="'yellow'">Highlight this text bright yellow</p>

自定義元件就是實現Vue提供的鉤子函式，在Vue 3中鉤子函式的生命週期和元件的生命週期類似：

• created - 元素建立後，但是屬性和事件還沒有生效時呼叫。
• beforeMount- 僅呼叫一次，當指令第一次繫結元素的時候。
• mounted- 元素被插入父元素時呼叫.
• beforeUpdate: 在元素自己更新之前呼叫
• Updated - 元素或者子元素更新之後呼叫.
• beforeUnmount: 元素解除安裝前呼叫.
• unmounted -當指令解除安裝後呼叫，僅呼叫一次
  

每一個鉤子函式都有如下引數：

• el: 指令繫結的元素，可以用來直接操作DOM
• binding: 資料物件，包含以下屬性

instance: 當前元件的例項，一般推薦指令和元件無關，如果有需要使用元件上下文ViewModel，可以從這裡獲取
value: 指令的值，即上面示例中的“yellow“
oldValue: 指令的前一個值，在beforeUpdate和Updated 中，可以和value是相同的內容。
arg: 傳給指令的引數，例如v-on:click中的click。
modifiers: 包含修飾符的物件。例如v-on.stop:click 可以獲取到一個{stop:true}的物件

• vnode: Vue 編譯生成的虛擬節點,
• prevVNode: Update時的上一個虛擬節點
  

Vue 2 指令升級

指令在Vue3中是一個Breaking Change，指令的鉤子函式名稱和數量發生了變化。Vue3中為指令建立了更多的函式，函式名稱和元件的生命週期一致，更易理解。

以下是變化介紹

另一個變化是元件上下文物件的獲取方式發生了變化。一般情況下推薦指令和元件例項相互獨立，從自定義指令內部去訪問元件例項，那可能說明這裡不需要封裝指令，指令就是元件本事的功能。但是可能的確有某些場景需要去獲取元件例項。

在Vue 2中通過vnode引數獲取

bind(el,vnode) {
const vm = vnode.context
}

在Vue 3中 通過binding引數獲取

mounted(el,vnode) {
const vm = binding.instance
}

Vue 3 自定義指令例項 – 輸入拼寫檢查

這裡使用Plugin的方式注入指令。

新建SpellCheckPlugin.ts，宣告外掛，在外掛的install方法中注入指令

import { App } from 'vue'

function SpellCheckMain(app: App,options: any) {
//
}

export default {
install: SpellCheckMain
}

SpellCheckMain方法實現元件以及，拼寫檢查方法，具體拼寫檢查規則可以根據業務或者使用其他外掛方法實現

function SpellCheckMain(app: App,options: any) {
const SpellCheckAttribute = "spell-check-el";

let SpellCheckTimer: Map<string,number> = new Map();
let checkerId = 0;
function checkElement(el: HTMLElement) {
let attr = el.getAttribute(SpellCheckAttribute);
if (attr) {
clearTimeout(SpellCheckTimer.get(attr));
let timer = setTimeout(() => { checkElementAsync(el) },500);
SpellCheckTimer.set(attr,timer)
}
}
function checkText(words?: string | null): [string?] {
if (!words) {
return [];
}
let errorWordList: [string?] = [];
try {
let wordsList = words.match(/[a-zA-Z]+/ig);
wordsList?.forEach((word) => {
if (!checkWord(word)) {
errorWordList.push(word);
}
})
}
catch {

}
return errorWordList;
}
function checkWord(text: string) {
//模擬拼寫檢查，這裡使用其他檢查庫
return text.length > 6 ? false : true;
}
function checkElementAsync(el: HTMLElement) {

let text = (el as HTMLInputElement).value || el.innerText;
let result = checkText(text);

let attr = el.getAttribute(SpellCheckAttribute);
if (!attr) {
return;
}

if (result && result.length) {
el.style.background = "pink"
let div = document.getElementById(attr);
if (!div) {
div = document.createElement("div");
div.id = attr;
div.style.position = "absolute"
div.style.top = "0px"
div.style.left = el.clientWidth + "px"

if (el.parentElement) {
el.parentElement.style.position = "relative"
if (el.parentElement.lastChild === el) {
el.parentElement.appendChild(div);
}
else {
el.parentElement.insertBefore(div,el.nextSibling);
}
}
}
div.innerHTML = result.length.toString() + " - " + result.join(",");
} else {
el.style.background = "";

let div = document.getElementById(attr);
if (div) {
div.innerHTML = ""
}
}

console.log(result)
}

app.directive('spell-check',{
created() {
console.log("created",arguments)
},mounted: function (el,vnode,oldVnode) {

console.log("mounted",arguments)
//set checker id for parent
let attr = "spellcheck-" + (checkerId++);
el.setAttribute(SpellCheckAttribute,attr);
console.log("attr",attr)

if (el.tagName.toUpperCase() === "DIV") {
el.addEventListener("blur",function () {
checkElement(el)
},false);
}
if (el.tagName.toUpperCase() === "INPUT") {
el.addEventListener("keyup",false);
}
// el.addEventListener("focus",function () {
// checkElement(el)
// },false);
},updated: function (el) {
console.log("componentUpdated",arguments)
checkElement(el);
},unmounted: function (el) {
console.log("unmounted",arguments)

let attr = el.getAttribute(SpellCheckAttribute);
if (attr) {
let div = document.getElementById(attr);
if (div) {
div.remove();
}
}
}
})
}

main.ts中使用外掛　　

/// <reference path="./vue-app.d.ts" />
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import SpellCheckPlugin from './plugins/SpellCheckPlugin'

let app = createApp(App)
app.use(SpellCheckPlugin)
app.use(router).mount('#app')

元件中直接使用指令即可

<template>
<div ref="ssHost" style="width: 100%; height: 600px"></div>
<div><div ref="fbHost" spell-check v-spell-check="true" contenteditable="true" spellcheck="false" style="border: 1px solid #808080;width:600px;"></div></div>
<div><input v-model="value1" v-spell-check spellcheck="false" style="width:200px;" /></div>
</template>

結合在使用SpreadJS上 ，基於檢查使用者拼寫輸入的功能，效果如下圖：

以上就是Vue 3自定義指令開發的相關總結的詳細內容，更多關於Vue 3自定義指令開發的資料請關注我們其它相關文章！