自定义指令分为全局和局部两种，大家比较熟悉。今天我们就来说说vue3中自定义指令的定义、使用、hook函数的变化？1、注册自定义指令下面的例子是实现输入框自动获取焦点的自定义指令。1.1.全局自定义指令在vue2中，全局自定义指令是通过指令挂载在Vue对象上的，使用的是Vue.directive('name',opt)。示例1：Vue2全局自定义指令Vue.directive('focus',{inserted:(el)=>{el.focus()}})inserted是一个钩子函数，当被绑定的元素插入父元素时执行节点。在vue3中，vue实例是通过createApp创建的，所以全局自定义指令的挂载方式也发生了变化，指令挂载在app上。例2：Vue3全局自定义指令//全局自定义指令app.directive('focus',{mounted(el){el.focus()}})//组件使用//本地自定义命令constautoFocus={focus:{created(){console.log('created');},beforeMount(){console.log('beforeMount');},mounted(el){console.log('mounted');},beforeUpdated(){console.log('beforeUpdated')},updated(){console.log('更新');},beforeUnmount(){console.log('beforeUnmount');},unmounted(){console.log('unmounted');}},}import{ref}from'vue'exportdefault{directives:autoFocus,setup(){constshow=ref(true)return{show,changStatus(){show.value=!show.value}}}}通过点击按钮，我们发现在创建一个input元素的时候，created,beforeMount并挂载了三个钩子函数。当input元素被隐藏时，会触发beforeUnmount和unmounted。但是，我们添加的beforeUpdate和updated函数并没有执行。此时，如果我们把input元素上的v-if改成v-show，就会执行上面的两个方法，具体执行情况可以自行验证。从vue2升级到vue3后，自定义指令的生命周期钩子函数发生了变化，具体变化如下：bind函数被beforeMounted取代。更新已删除。componentUpdated被updated取代。unbind被unmounted取代。插入被删除。3.自定义命令钩子函数的参数钩子函数被赋予如下参数：el：命令绑定的元素，可以直接操作DOM。绑定：是一个对象，包含指令的所有信息。绑定中包含的具体属性有：arg自定义指令的参数名称。value自定义指令绑定的值。oldValue指令绑定到的先前值。dir挂钩要执行的函数modifiers：包含修饰符的对象。
