vuejs源码分析之全局API（vm.$off）

vue在初始化的时候会给vue对象本身挂载一些全局的api。今天我们一个一个来看这些api。

vm.$off方法

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

vm.$off(event, calback)

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

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

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

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

没有参数的情况下

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

Vue.prototype.$off = function ( event?: string | Array<string>,fn?: Function): Component {const vm: Component = this// 移除所有事件的监听器if (!arguments.length) {vm._events = Object.create(null)return vm}return vm;
}

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

第一个参数是数组的情况

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

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

 Vue.prototype.$off = function (event?: string | Array<string>,fn?: Function): Component {const vm: Component = this// 移除所有事件的监听器if (!arguments.length) {vm._events = Object.create(null);return vm;}// 新增代码if (Array.isArray(event)) {for (let i = 0, l = event.length; i < l; i++) {this.$off(event[i], fn);}return vm;}return vm;
}

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

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

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

const cbs = vm._events[event];
if (!cbs) {return vm;
}// 移除该事件的所有监听器
if (arguments.length === 1) {vm._events[event] = nullreturn vm;
}

事件和回调都有的情况

只需要使用参数提供的事件名从vm._events上取出事件列表。然后从列表中找到与参数提供回调函数相同的那个函数，并将它从列表中移除。

 if (fn) {const cbs = vm._events[event];let cb;let i = cbs.length;while (i--) {cb = cb[i];if (cb === fn || cb.fn === fn) {cbs.splice(i, 1);break;}}}