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不直接交互。

多组件可用的通用操作，通过使用组件（component）可以很好的实现复用，同样通过使用组件也可以实现功能在组件上的复用。例如拼写检查、图片懒加载。使用组件，只要在需要拼写检查的输入组件上加上标签，遍可为组件注入拼写检查的功能，无需再针对不同组件封装新的支持拼写功能呢。

vue 3如何自定义指令

vue支持全局注册和局部注册指令。

全局注册注册通过app实例的directive方法进行注册。

局部注册通过给组件设置directive属性注册

注册组件包含组件的名字，需要唯一和组件的一个实现对象，组册后即可在任何元素上使用了。

自定义组件就是实现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参数获取

在vue 3中 通过binding参数获取

vue 3 自定义指令实例 – 输入拼写检查

这里使用plugin的方式注入指令。

新建spellcheckplugin.ts，声明插件，在插件的install方法中注入指令

spellcheckmain方法实现组件以及，拼写检查方法，具体拼写检查规则可以根据业务或者使用其他插件方法实现

main.ts中使用插件　　

组件中直接使用指令即可

结合在使用spreadjs上 ，基于检查用户拼写输入的功能，效果如下图：

以上就是vue 3自定义指令开发的相关总结的详细内容，更多关于vue 3自定义指令开发的资料请关注其它相关文章！