so easy 的 Vue3.0自定义指令（也搜一贼）

快来打我* 2022-09-13 11:19 143阅读 0赞

### 前言 ###

> 前面一篇文章[Vue2.0如何实现一个自定义指令（搜一贼）][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  
>     ![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiA56yR56iL5bqP54y0_size_20_color_FFFFFF_t_70_g_se_x_16]

> 通过上面的分析和类比我们发现，其实除了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中的函数做了一下简单对比，最终发现其实还是大同小异，只是名称发生了一些明显的变化。最后仍然以一个简单的不能再简单的文本框聚焦小案例结尾。  
> 本文就介绍到这里，如果小伙伴们喜欢，欢迎点赞留言加关注哦。

[Vue2.0]: https://blog.csdn.net/lixiaosenlin/article/details/120528527
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiA56yR56iL5bqP54y0_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/b3d3842f76d246c5a43cc23196ad41a7.png