## 事件相关实例方法 ### $on ``` Vue.prototype.$on = function (event, fn) { const vm = this if (Array.isArray(event)) { for (let i = 0; i < event.length; i++) { this.$on(event[i], fn) } } else { (vm._events[event]) || (vm._events[event] = []).push(fn) } return vm } ``` ### $off ``` Vue.prototype.$off = function (event, fn) { const vm = this // remove all if (!arguments.length) { vm._events = Object.create(null) return vm } if (Array.isArray(event)) { for (let i = 0; i < event.length; i++) { vm.$off(event\[i\], fn) } return vm } if (!vm._events[event]) { return vm } if (arguments.length === 1) { vm._events[event] = null return vm } // 同时提供事件和回调 if (fn) { const cbs = vm._events[event\] let cb let i = cbs.length while (i--) { cd = cbs[i] if (cb === fn || cb.fn === fn) { cbs.splice(i, 1) break } } return vm } return vm } ``` * 未提供参数，移除所有的事件监听器 * 只提供event，移除该事件的所有的事件监听器 * 同时提供 event 和 fn，只移除对应的回调监听器 ### $once ``` Vue.prototype.$once = function (event, fn) { const vm = this function on () { vm.$off(event, fn) fn.apply(vm, arguments) } on.fn = fn vm.$on(event, on) return vm } ``` 使用 $on 来监听 执行回调函数fn时，先调用 $off 移除监听，再手动调用fn 注意点：on.fn = fn ，用来保证 $off 移除的时候，用户提供的监听器和 _events 里的相等，这样才能移除成功 ### $emit ``` Vue.prototype.$emit = function (event) { const vm = this let cbs = vm._events[event] if (cbs) { const args = toArray(arguments, 1) for (let i = 0; i < event.length; i++) { cbs[i].apply(vm, args) } } return vm } ```