Vue 3自定義指令開發的相關總結
什麼是指令(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, binding, 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, binding, vnode) { const vm = vnode.context }
在Vue 3中 通過binding參數獲取
mounted(el, binding, 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, binding, 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", function () { checkElement(el) }, 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自定義指令開發的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- vue 自定義指令directives及其常用鉤子函數說明
- vue2.x與vue3.x中自定義指令詳解(最新推薦)
- 詳解Vue自定義指令及使用
- VUE中的自定義指令鉤子函數講解
- vue3 自定義指令詳情