前言
前面一篇文章Vue2.0如何实现一个自定义指令（搜一贼）中我们已经对2.0中自定义指令的语法和钩子函数以及钩子函数中的参数进行了梳理，最后还实现了一个非常简单的文本框自动聚焦的小案例，接下来这篇文章我们将梳理一下vue3.0中自定义指令是如何实现的，3.0相较于2.0又发生了哪些变化。
vue3.0自定义指令
其实3.0中自定义指令的语法没有什么太大变化，唯一的变化就是在2.0中是通过Vue.directive()来实现一个全局的自定义指令，而3.0中不再使用Vue了，而是通过函数createApp()来返回一个vue实例app，进而通过app.directive()来实现一个全局的自定义指令。
directive所接受的参数没有变化，依然是name和options。那么在3.0中变化最大的便是options中的钩子函数了。一个包含了完整钩子函数的自定义指令应该是如下这样：
const app = createApp();
app.directive('focus',{
created(el,binding,vnode,oldVnode){
},
beforeMount(el,binding,vnode,oldVnode){
},
mounted(el,binding,vnode,oldVnode){
},
beforeUpdate(el,binding,vnode,oldVnode){
},
updated(el,binding,vnode,oldVnode){
},
beforeUnmount(el,binding,vnode,oldVnode){
},
unmounted(el,binding,vnode,oldVnode){
}
})
熟悉2.0自定义指令的小伙伴应该都知道，3.0中新增了几个钩子函数，并且钩子函数的名称也跟2.0完全不一样了（即便功能是一样的），下面我们就来逐个分析一下3.0中的每一个钩子函数
钩子函数与参数
- created：在绑定元素的attribute或者事件监听器被应用之前调用。比如某元素需要绑定一个click事件，同时该元素还应用了自定义指令，那么在该元素绑定click事件之前便会出发自定义指令的created钩子函数。3.0中新增
- beforeMount：当指令第一次绑定到元素并且在挂载父组件之前调用。类似2.0中的bind
- mounted：在绑定元素的父组件被挂载后调用。类似2.0中inserted
- beforeUpdate：在更新包含组件的VNode之前调用。3.0中新增
- updated：在包含组件的VNode及其子组件的VNode更新后调用。类似2.0中的componentUpdate
- beforeUnmount：在卸载绑定元素的父组件之前调用。3.0中新增
- unmounted：当指令与元素解除绑定且父组件已卸载时，只调用一次。类似2.0中的unbind
通过上面的分析和类比我们发现，其实除了3.0中新增的钩子函数，剩下几个函数的功能与作用跟2.0中提供的钩子函数基本是一样的。
而3.0中钩子函数的参数依然还是4个（el, binding, vNode, prevNode），并且与2.0中的以一样的，唯一不同的是第四个参数名称变成了prevNode，其作用还是相同的。2.0中已经对每个参数进行了详细说明，这里就不在赘述了。
3.0自定义指令小案例
最后我们依然实现一个文本框自动聚焦的小案例
const app = createApp();
// 注册一个全局自定义指令 `v-focus`
app.directive('focus',{
mounted(el){
// 当被绑定的元素挂载到 DOM 中时
el.focus(); // 聚焦元素
}
});
总结
3.0中的自定义指令是不是依然是搜一贼。本文我们对3.0中自定义指令的语法和钩子函数进行了梳理，同时也结合着2.0中的函数做了一下简单对比，最终发现其实还是大同小异，只是名称发生了一些明显的变化。最后仍然以一个简单的不能再简单的文本框聚焦小案例结尾。
本文就介绍到这里，如果小伙伴们喜欢，欢迎点赞留言加关注哦。