vue指令总结-一次帮你学会使用

指令Vue有一些内置的指令，也提供了自定义指令的接口。指令的作用：可以将一些可复用的逻辑封装成指令，实现逻辑复用。根据使用范围，指令分为全局指令和局部指令（在某个组件内部使用）。指令与组件一样，具有在定义指令的特定时间执行的功能。有一个v-test指令供使用。：下面是指令参数，类似于v-on:keyup在keyup中。后。是指令修饰符，foo是修饰符。参数只能有一个，修饰符可以有多个。v-test:disabled:boo.foo.zoo="msg"{arg:"disabled:boo"modifiers:{foo:true,zoo:true}}如果想在不同的情况绑定不同的参数，可以使用dynamic参数。v-test:[argu].foo.zoo="msg"参数必须在修饰符之前。指令表达式后跟等号，其值对应绑定对象的值属性。绑定一个对象：{arg:"disabled",expression:"msg",modifiers:{foo:true},name:"test",value:"Hello",}vue2指令定义以插件的形式定义了一个全局-inv-click-outside:exportconstclickOutside=(Vue,options)=>{Vue.directive('clickOutside',{inserted(el,binding,vnode){const{value}=binding//const_this=vnode复制代码.context//NOTE提示：处理函数挂载在元素上，方便解绑时移除事件监听el.onClick=({target})=>{if(el.contains(target)){//点击内部console.log('clickInside')}else{//点击外部console.log('clickOutside')value&&value()}}document.addEventListener('click',el.onClick,false)},解除绑定(el,binding,vnode){document.removeEventListener('click',el.onClick,false)},})}注册插件：main.jsVue.use(clickOutside)使用：当你点击div外部时，onClickOutsideVue.directive将是executed('directive-name',options)options是一个包含一些生命周期钩子的对象，这些生命周期是可选的。根据执行顺序：bind#只调用一次，当指令绑定到元素上时，父元素可能不存在。做初始化工作??inserted#只调用一次，将绑定元素插入到父节点中，父节点存在，此时绑定元素可能仍然插入到文档中。??update#此时组件还没有更新，获取不到最新数据??componentUpdated#此时组件已经更新，可以获取最新数据??unbind#只调用一次，解除绑定命令和元素，并做一些收尾工作简写方法：Vue.directive('color-swatch',function(el,binding){el.style.backgroundColor=binding.value})在绑定和更新时触发相同的行为，不管其他钩子。钩子参数bind(el,binding,vnode)inserted(el,binding,vnode)update(el,binding,vnode,oldVnode)//updatecomponentUpdated有额外的oldVnodecomponentUpdated(el,binding,vnode,oldVnode)unbind(el,binding,vnode)命令钩子函数参数，主要关注el和binding。el是指令绑定到的元素，可以在其上执行DOM操作。绑定一个对象：{arg:"disabled",expression:"msg",modifiers:{foo:true},name:"test",value:"Hello",}update和componentUpdated钩子函数，绑定对象和oldArg和oldValue财产。指令钩子和组件生命周期的执行顺序是什么？挂载组件beforeCreate??created??beforeMount??bind#指令绑定元素时调用，父元素可以不存在??inserted#指令被绑定元素插入父元素时调用，父元素必须存在??挂载更新组件beforeUpdate??update#指令，此时组件没有更新，无法获取最新数据??componentUpdated#指令现在更新，可以获取最新数据??updated销毁组件beforeDestroy??unbind#The指令组件在销毁前被调用，仍然可以获取到组件的数据??destroyed重建时，beforeCreate??created(rebuild)??beforeMount??bind#这里注意，指令绑定了这个钩子函数，重建后的最新数据将不可用??beforeDestroy（组件销毁）??unbind#指令??destroyed??inserted#指令使用这个钩子函数获取reconstructeddata??mounted结论：只有inserted和componentUpdated生命周期钩子，组件的DOM在执行过程中已经更新，可以放心使用。他们可以获得组件的更新数据，指令绑定的元素的父元素已经存在。如何在指令生命周期中使用this或access组件实例？直接把this当作undefined，可以用vnode.context获取：inserted(el,binding,vnode){//setTile是组件方法vnode.context.setTile(el)中的方法},componentUpdated(el,binding,vnode,oldVnode){vnode.context.setTile(el)}，vue3中的指令钩子，钩子的参数和定义方式都变了。全局指令定义方法app.directive('directive-name',directiveOptions)shortform:app.directive('directive-name',(el,binding)=>{})//挂载和更新操作同一个本地指令脚本setup使用v开始名称。setupFunctionmethod:InstructionhookChange:constmyDirective={//Callcreated(el,binding,vnode){}在绑定元素的属性之前//或者在应用事件监听器之前{},//在元素插入DOM之前调用，可以进行一些初始化WorkbeforeMount(el,binding,vnode){},//在绑定元素的父组件//及其所有子节点都挂载之后调用mounted(el,binding,vnode){}(el,binding,vnode){},//绑定调用beforeUpdate(el,binding,vnode,prevVnode){}在给定元素的父组件更新之前，//在绑定元素的父组件//及其所有子节点更新之后调用updated(el,binding,vnode,prevVnode){},//在绑定元素的父组件卸载之前调用，完成工作beforeUnmount(el,binding,vnode){},//绑定元素的父组件unmounted后调用unmounted(el,binding,vnode){},}常用hooks:beforeMount#类似vue2bindmounted#类似vue2insertedupdated#类似vue2componentUpdatedbeforeUnmount#类似vue2unbindbinding的参数有一个变化：增加了instance属性来获取组件实例创建一个检测div外部点击的指令：importtype{App}from'vue'exportconstclickOutside=(app:App,options:any)=>{app.directive('clickOutside',{mounted(el,binding){const{value,instance}=binding//注意提示：处理函数挂载在元素上，方便解绑时去掉事件监听el.onClick=(event:Event)=>{if(el.contains(event.target)){console.log('clickInside')}else{//点击外部console.log('clickOutside')//console.log(instance)//组件实例值&&value()}}document.addEventListener('click',el.onClick,false)},beforeUnmount(el){console.log('beforeUnmount')document.removeEventListener('click',el.onClick,false)},})returnapp}的使用hook实现相同的功能：import{onMounted,onBeforeUnmount,ref}from'vue'exportfunctionuseOnClickOutside(DOM=null,callback){constisClickOutside=ref(false)functionhandleClick(event){if(DOM.value&&!DOM.value.contains(event.target)){callback()isClickOutside.value=true}}onMounted(()=>{document.addEventListener('mousedown',handleClick)})onBeforeUnmount(()=>{document.removeEventListener('mousedown',handleClick)})returnisClickOutside}hookvs指令用法：hook脚本中指令绑定模板定义方法：hook更简单，只要记住组件的生命钩子，复用更方便，而且指令略显繁琐，需要额外的内存。命令钩子钩子可以返回响应对象，但是命令不能。挂钩的优点更大，更灵活。指令钩子函数的执行顺序和组件生命周期挂载阶段：setuponBeforeMountcreated#instructionhookbeforeMount#instructionhookmounted#instructionhookonMounted销毁阶段：onBeforeUnmountbeforeUnmount#instructionhookunmounted#instructionhookonUnmounted更好的做法：只有mounted、updated和beforeUnmount钩子被定义。其他问题如何使用代码测试说明？我找不到这方面的教程。github上有issue，请解答。摘要指令是重用逻辑的有效方式，尤其是当您需要直接操作DOM时。vue2中常用的命令钩子：inserted、componentUpdated和unbind。vue3中常用的命令钩子：mounted、updated和beforeUnmount。vue3中的脚本设置定义了本地指令以v开头。vue3的绑定对象增加了instance属性。可以实现同样的功能钩子和指令，钩子的优势更大。