共计 5205 个字符，预计需要花费 14 分钟才能阅读完成。
什么是指令（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 自定义指令开发的局部玩法介绍，大家如果晓得更多的应用办法欢送通过留言分享进去。