什么是指令（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;
},
},
},
});
注册组件蕴含组件的名字，须要惟一和组件的一个实现对象，组册后即可在任何元素上应用了。
1
< 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 自定义指令实例 – 输出拼写查看
这里应用Pluginwww.sangpi.com的形式注入指令。
新建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上 ，基于检查用户拼写输出的性能，成果如下图：
以上就是Vue3 自定义指令开发的局部玩法介绍，大家如果晓得更多的应用办法欢送通过留言分享进去。