『 Vue小Case 』- 如何动态绑定多个事件（内附源码解析）

new Vue({
  el: '#container',
  mounted: function() {
    const eventMaps = {
      'my-event1': this.eventHandler,
      'my-event2': this.eventHandler,
    }

    // 通过 forEach 遍历绑定多个事件
    Object.keys(eventMaps).forEach((event) => {
      this.$on(event, eventMaps[event])
    })

    // vm.$on 传递数组，绑定多个事件
    this.$on(['my-event3', 'my-event4'], this.eventHandler)

    this.triggerEvents()
  },
  methods: {
    eventHandler(eventName) {
      console.log(eventName + ' 事件被触发!')
    },
	// 不同时间间隔触发多个事件
    triggerEvents() {
      setTimeout(() => {
        this.$emit('my-event1', 'my-event1')
      }, 1000)

      setTimeout(() => {
        this.$emit('my-event2', 'my-event2')
      }, 2000)

      setTimeout(() => {
        this.$emit('my-event3', 'my-event3')
        this.$emit('my-event4', 'my-event4')
      }, 3000)
    }
  }
})

<div id="container" v-on="eventMaps">
  动态绑定多个事件
</div>

new Vue({
  el: '#container',
  computed: {
     eventMaps() {
       return {
         'click': this.clickHandler,
         'mouseover': this.mouseoverHandler,
         'my-event1': this.eventHandler,
       }
     }
  },
  mounted: function() {
    this.triggerEvents()
  },
  methods: {
    clickHandler(eventName) {
      console.log('原生 click 事件被触发!')
    },
    eventHandler(eventName) {
      console.log(eventName + ' 事件被触发!')
    },
    mouseoverHandler(eventName) {
      console.log('原生 mouseover 事件被触发!')
    },
    triggerEvents() {
      setTimeout(() => {
		console.log('主动触发my-event1事件')
        this.$emit('my-event1', 'my-event1')
      }, 5000)
    }
  }
})

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++) {
      vm.$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
}

Vue.prototype.$emit = function (event: string): Component {
  const vm: Component = this
  // 其他非核心逻辑
  let cbs = vm._events[event]
  if (cbs) {
    cbs = cbs.length > 1 ? toArray(cbs) : cbs
    const args = toArray(arguments, 1)
    const info = `event handler for "${event}"`
    for (let i = 0, l = cbs.length; i < l; i++) {
      invokeWithErrorHandling(cbs[i], vm, args, vm, info)
    }
  }
  return vm
}

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
  }
  // 如果事件名是个数组，则递归$off。与$on中类似，所以可以多维数组
  if (Array.isArray(event)) {
    for (let i = 0, l = event.length; i < l; i++) {
      vm.$off(event[i], fn)
    }
    return vm
  }
  // 以下情况为指定了特定事件的处理
  const cbs = vm._events[event]
  // 如果事件本身就没有处理函数，则直接返回
  if (!cbs) {
    return vm
  }
  // 如果没有指定要移除的处理函数，则直接清空该事件的所有处理函数
  if (!fn) {
    vm._events[event] = null
    return vm
  }
  // 如果指定了处理函数，则在事件对应的处理函数中找到该处理函数，移出数组
  let cb
  let i = cbs.length
  while (i--) {
    cb = cbs[i]
    // 这里的cb.fn是为了兼容$once中的用法
    if (cb === fn || cb.fn === fn) {
      cbs.splice(i, 1)
      break
    }
  }
  return vm
}

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
}

// 是否是指令
export const dirRE = process.env.VBIND_PROP_SHORTHAND
  ? /^v-|^@|^:|^\.|^#/
  : /^v-|^@|^:|^#/
// v-on及其简写的正则
export const onRE = /^@|^v-on:/
// v-bind及其简写的正则
export const bindRE = /^:|^\.|^v-bind:/

// 处理属性
function processAttrs (el) {
  const list = el.attrsList
  let i, l, name, rawName, value, modifiers, syncGen, isDynamic
  for (i = 0, l = list.length; i < l; i++) {
    name = rawName = list[i].name
    value = list[i].value

    // 是否是指令属性
    if (dirRE.test(name)) {
      // ...

      // v-bind 处理
      if (bindRE.test(name)) {
        // ...
      // 常规v-on 处理
      } else if (onRE.test(name)) {
        // ... 参考上面提到的文章，本文重点不在这里
      // v-on动态绑定多事件比较特殊，会按照通用指令来处理
      } else {
        name = name.replace(dirRE, '')
        // parse arg
        const argMatch = name.match(argRE)
        let arg = argMatch && argMatch[1]
        isDynamic = false
        if (arg) {
          name = name.slice(0, -(arg.length + 1))
          if (dynamicArgRE.test(arg)) {
            arg = arg.slice(1, -1)
            isDynamic = true
          }
        }
		// *** 重点在这里 ***
        addDirective(el, name, rawName, value, arg, isDynamic, modifiers, list[i])
		// ...
     }
    } else {
      // 常规属性处理逻辑
    }
  }
}

export default function on (el: ASTElement, dir: ASTDirective) {
  // 不可以使用修饰符，否则会有如下警告：
  if (process.env.NODE_ENV !== 'production' && dir.modifiers) {
    warn(`v-on without argument does not support modifiers.`)
  }
  el.wrapListeners = (code: string) => `_g(${code},${dir.value})`
}

export function bindObjectListeners (data: any, value: any): VNodeData {
  // 这时value已经被转成对象字面量了，而不是字符串了。
  if (value) {
    // 如果不是对象字面量会报错
    if (!isPlainObject(value)) {
      process.env.NODE_ENV !== 'production' && warn(
        'v-on without argument expects an Object value',
        this
      )
    } else {
      // 处理对象，将其加入到data.on中记录下来
      const on = data.on = data.on ? extend({}, data.on) : {}
      for (const key in value) {
        const existing = on[key]
        const ours = value[key]
        on[key] = existing ? [].concat(existing, ours) : ours
      }
    }
  }
  return data
}

export function updateListeners (
  on: Object,
  oldOn: Object,
  add: Function,
  remove: Function,
  createOnceHandler: Function,
  vm: Component
) {
  let name, def, cur, old, event
  for (name in on) {
    def = cur = on[name]
    old = oldOn[name]
    event = normalizeEvent(name)
	// 如果处理函数未定义，则警告
    if (isUndef(cur)) {
      process.env.NODE_ENV !== 'production' && warn(
        `Invalid handler for event "${event.name}": got ` + String(cur),
        vm
      )
    // 如果不存在旧的处理函数
    } else if (isUndef(old)) {
      if (isUndef(cur.fns)) {
        cur = on[name] = createFnInvoker(cur, vm)
      }
      if (isTrue(event.once)) {
        cur = on[name] = createOnceHandler(event.name, cur, event.capture)
      }
      add(event.name, cur, event.capture, event.passive, event.params)
	// 如果存在旧的处理函数的处理逻辑
    } else if (cur !== old) {
      old.fns = cur
      on[name] = old
    }
  }
  for (name in oldOn) {
    if (isUndef(on[name])) {
      event = normalizeEvent(name)
      remove(event.name, oldOn[name], event.capture)
    }
  }
}

const normalizeEvent = cached((name: string): {
  name: string,
  once: boolean,
  capture: boolean,
  passive: boolean,
  handler?: Function,
  params?: Array<any>
} => {
  const passive = name.charAt(0) === '&'
  name = passive ? name.slice(1) : name
  const once = name.charAt(0) === '~' // Prefixed last, checked first
  name = once ? name.slice(1) : name
  const capture = name.charAt(0) === '!'
  name = capture ? name.slice(1) : name
  return {
    name,
    once,
    capture,
    passive
  }
})