Vue实例方法之事件的实现

2024-03-02 16:15:10

开始

这段时间一直在看vue的源码，源码非常多和杂，所以自己结合资料和理解理出了一个主线，然后根据主线去剥离其他的一些知识点，然后将各个知识点逐一学习。这里主要是分析的事件系统的实现。

正文

一、了解使用方式

在分析之前先了解下几个api的使用方式：

vm.$on(event, callback)

  • 参数：

    • {string | Array<string>} event (数组只在 2.2.0+ 中支持)
    • {Function} callback
  • 用法：$on事件需要两个参数，一个是监听的当前实例上的事件名，一个是事件触发的回调函数，回调函数接受的是在事件出发的时候额外传递的参数。
  • 例子：
vm.$on('test', function (msg) {
  console.log(msg)
})
vm.$emit('test', 'hi')
// => "hi"
vm.$once(event, callback)

$once事件整体上来说和$on事件的使用方式差不多，但是event只支持字符串也就是说只支持单个事件。并且该事件再触发一次后就移除了监听器。

  • 例子
vm.$once('testonce', function (msg) {
  console.log(msg)
})
vm.$off([event, callback])

  • 参数：

    • {string | Array<string>} event（仅在 2.2.2+ 支持数组）
    • {Function} [callback]

  • 用法:移除自定义事件监听器

    • 如果没有提供参数，则移除所有的事件监听器
    • 如果只提供了事件，则移除该事件所有的监听器；
    • 如果同时提供了事件与回调，则只移除这个回调的监听器。
  • 例子：
vm.$off()
vm.$off('test')
vm.$off('test1', function (msg) {
  console.log(msg)
})
vm.$off(['test1','test2'], function (msg) {
  console.log(msg)
})
vm.$emit(event, [..args])

  • 参数：

    • {string} event 要触发的事件名
    • [...args]可选
  • 用法：

触发当前实例上的事件。附加参数都会传给监听器回调。

  • 例子
vm.$emit('test', '触发自定义事件')

二、源码分析

事件的初始化工作

我们在使用自定义事件的api的时候，肯定有个地方是需要来存我们的事件和回调的地方。在vue中大部分的初始化工作都是在core/instance/init.js的initMixin方法中。所以我们能够在initMixin看到initEvents方法。

// initEvents
export function initEvents (vm: Component) {
  vm._events = Object.create(null)
  vm._hasHookEvent = false
  // init parent attached events
  const listeners = vm.$options._parentListeners
  if (listeners) {
    updateComponentListeners(vm, listeners)
  }
}

上面的代码可以看到，在初始化Vue事件的时候,在vm实例上面挂载了一个_events的空对象。后面我们自己调用的自定义事件都存在里面。

因为vue本身在组件嵌套的时候就有子组件使用父组件的事件的时候。所以就可以通过updateComponentListeners方法把父组件事件监听器（比如click）传递给子组件。（这里不做过多讨论）

自定义事件的挂载方式

自定义事件的挂载是在eventsMixin方法中实现的。这里面将四个方法挂在Vue的原型上面。

Vue.prototype.$on
Vue.prototype.$once
Vue.prototype.$off
Vue.prototype.$emit
Vue.prototype.$on的实现
Vue.prototype.$on = function (event: string | Array<string>, fn: Function): Component {
const vm: Component = this
    if (Array.isArray(event)) {
      for (let i = 0, l = event.length; i < l; i++) {
        this.$on(event[i], fn)
      }
    } else {
      (vm._events[event] || (vm._events[event] = [])).push(fn)
      // optimize hook:event cost by using a boolean flag marked at registration
      // instead of a hash lookup
      if (hookRE.test(event)) {
        vm._hasHookEvent = true
      }
    }
    return vm
}

第一个参数就是自定义事件，因为可能是数组，所以判断如果是数组，那么就循环调用this.$on方法。
如果不是数组，那么就直接向最开始定义的_events对象集合里面添加自定义事件。

所以这个时候_events对象生成的格式大概就是下面：

vm._events={
    'test':[fn,fn...],
    'test1':[fn,fn...]
}
Vue.prototype.$once 的实现
Vue.prototype.$once = function (event: string, fn: Function): Component {
    const vm: Component = this
    function on () {
      vm.$off(event, on)
      fn.apply(vm, arguments)
    }
    on.fn = fn
    vm.$on(event, on)
    return vm
}

这里定义了一个on函数。接着把fn赋值给on.fn。最后在调用的是vm.$on。这里传入的就是事件名和前面定义的on函数。on函数在执行的时候会先移除_events中对应的事件，然后调用fn

所以分析下得到的是：

vm._events={
    'oncetest':[ 
          function on(){
              vm.$off(event,on)
              fn.apply(vm,arguments)
          } ,
          ...
     ]
}
Vue.prototype.$off的实现
Vue.prototype.$off = function (event?: string | Array<string>, fn?: Function): Component {
    const vm: Component = this
    // all
    // 如果没有传任何参数的时候，直接清楚所有挂在_events对象上的所有事件。
    if (!arguments.length) {
      vm._events = Object.create(null)
      return vm
    }
    // array of events
    // 如果第一个参数是数组的话，那么就循环调用this.$off方法
    if (Array.isArray(event)) {
      for (let i = 0, l = event.length; i < l; i++) {
        this.$off(event[i], fn)
      }
      return vm
    }
    // specific event
    // 获取对应事件所有的回调可能是个数组
    const cbs = vm._events[event]
    // 没有相关的事件的时候直接返回vm实例
    if (!cbs) {
      return vm
    }
    // 如果只传入了事件名，那么清除该事件名下所有的事件。 也就是说 vm._events = {'test': null, ...}
    if (!fn) {
      vm._events[event] = null
      return vm
    }
    // 如果传入的第二个参数为真，那么就去cbs里面遍历，在cbs中找到和fn相等的函数，然后通过splice删除该函数。
    if (fn) {
      // specific handler
      let cb
      let i = cbs.length
      while (i--) {
        cb = cbs[i]
        if (cb === fn || cb.fn === fn) {
          cbs.splice(i, 1)
          break
        }
      }
    }
    return vm
}

上面主要就是实现的下面三种情况：

  • 如果没有提供参数，则移除所有的事件监听器；
  • 如果只提供了事件，则移除该事件所有的监听器；
  • 如果同时提供了事件与回调，则只移除这个回调的监听器。
Vue.prototype.$emit 的实现
Vue.prototype.$emit = function (event: string): Component {
    const vm: Component = this
    if (process.env.NODE_ENV !== 'production') {
      const lowerCaseEvent = event.toLowerCase()
      if (lowerCaseEvent !== event && vm._events[lowerCaseEvent]) {
        tip(
          `Event "${lowerCaseEvent}" is emitted in component ` +
          `${formatComponentName(vm)} but the handler is registered for "${event}". ` +
          `Note that HTML attributes are case-insensitive and you cannot use ` +
          `v-on to listen to camelCase events when using in-DOM templates. ` +
          `You should probably use "${hyphenate(event)}" instead of "${event}".`
        )
      }
    }
    // 匹配到事件列表，该列表是一个json。
    let cbs = vm._events[event]
    if (cbs) {
      //将该json转化成为真正的数组
      cbs = cbs.length > 1 ? toArray(cbs) : cbs
      const args = toArray(arguments, 1)
      // 循环遍历调用所有的自定义事件。
      for (let i = 0, l = cbs.length; i < l; i++) {
        try {
          cbs[i].apply(vm, args)
        } catch (e) {
          handleError(e, vm, `event handler for "${event}"`)
        }
      }
    }
    return vm
}

上面主要意思是：匹配到json中相关key值的value,这个value先转换成真正的数组，再循环遍历数组，传入给的参数执行数组中的每个函数

最后

vue中的自定义事件主要目的是为了组件之间的通信。因为_events对象是挂在Vue实例上的。因此每个组件是都可以访问到vm._events的值的，也能够向其中push值的。

整个自定义事件系统呢就是在vm实例上挂载一个_events的对象，可以理解为一个json，其中json的key值就是自定义事件的名称，一个key值可能对应着多个自定义事件，因此json中每个key对应的value都是一个数组，每次执行事件监听都会向数组中push相关的函数，最终通过$emit函数传入的参数，匹配到json中相应的key,val值，从而使用给定的参数执行数组中的函数。

最后的_events对象：

vm._events={
    'test1':[fn,fn,fn],
    'test2':[fn],
    'oncetest':[ 
          function on(){
              vm.$off(event,on)
              fn.apply(vm,arguments)
          },
          ... 
     ],
     ...
}
上一篇：JavaScript中的Accelerator UI


下一篇：JavaScript / jQuery仅在第二次单击时有效