vuejs源码分析之全局API(vm.$off)

大家好,感谢邀请,今天来为大家分享一下旅游项目网站源码vue的问题,以及和vuejs源码分析之全局API(vm.$off)的一些困惑,大家要是还不太明白的话,也没有关系,因为接下来将为大家分享,希望可以帮助到大家,解决大家的问题,下面就开始吧!

vm.$off方法

这个方法是用来移除自定义事件监听器。他的用法

vm.$off(event,calback)\n

第一个参数event取值可以是string字符串,也可以是Array<string>也就是说既可以删除一个事件,也可以删除指定的多个。

第二个参数callback是Function函数类型。

也就是说移除这个事件对应的函数。

如果没有提供参数,则移除所有的事件监听器如果只提供了事件,则移除该事件所有的监听器如果同时提供了事件与回调,则只移除这个回调的监听器

没有参数的情况下

没有参数我们需要移除所有事件的监听器。代码如下:

Vue.prototype.$off=function(\nevent?:string|Array<string>,\nfn?:Function):Component{\nconstvm:Component=this\n//移除所有事件的监听器\nif(!arguments.length){\nvm._events=Object.create(null)\nreturnvm\n}\nreturnvm;\n}\n

从代码我们看出来当arguments.length为0的时候,说明没有任何参数,这时就需要移除所有的事件监听器,因此我们重置了vm._events属性。vm._evnents属性存储了所有事件。所以将vm.events重置为初始状态就等于将所有事件都移除了。

第一个参数是数组的情况

vm.$off的第一个参数event支持数组,所以接下来需要处理event参数为数组的情况。

其处理逻辑很简单,只需要将数组遍历一遍,然后数组中每一项依次调用vm.$off即可。

Vue.prototype.$off=function(\nevent?:string|Array<string>,\nfn?:Function\n):Component{\nconstvm:Component=this\n//移除所有事件的监听器\nif(!arguments.length){\nvm._events=Object.create(null);\nreturnvm;\n}\n\n//新增代码\nif(Array.isArray(event)){\nfor(leti=0,l=event.length;i<l;i++){\nthis.$off(event[i],fn);\n}\nreturnvm;\n}\n\nreturnvm;\n}\n

在上面代码中,event参数是数组时,遍历它并依次调用this.。代码中off和vm.$off是同一个方法,vm是this的别名。

有事件名,但是没有回调函数

则移除该事件所有监听器。将this._events中将event重置为空即可。

constcbs=vm._events[event];\nif(!cbs){\nreturnvm;\n}\n\n//移除该事件的所有监听器\nif(arguments.length===1){\nvm._events[event]=null\nreturnvm;\n}\n\n

事件和回调都有的情况

文章到此结束,如果本次分享的旅游项目网站源码vue和vuejs源码分析之全局API(vm.$off)的问题解决了您的问题,那么我们由衷的感到高兴!

Published by

风君子

独自遨游何稽首 揭天掀地慰生平