Vue之v-on里面的内容可以是什么

几种常见的写法

@click="fn"
@click=" ** = arguments[0] + arguments[1]"
@click=" ** =  $event"

methods: { fn(){ arguments[0] .... } }

$events 与 arguments 的区别在哪呢？
答案是：$events = arguments[0].

下面是解析v-on内容到执行内容的大概步骤：

1. parser/index.js 解析html中绑定的v-on

function processAttrs() {
  ...
  else if (onRE.test(name)) { // v-on
      name = name.replace(onRE, '')
      addHandler(el, name, value, modifiers, false, warn)
  }
  ...
}

2. complile/helpers.js 将事件加入到el.events

function addHandler() {
  ....
  const handlers = events[name]
  /* istanbul ignore if */
  if (Array.isArray(handlers)) {
    important ? handlers.unshift(newHandler) : handlers.push(newHandler)
  } else if (handlers) {
    events[name] = important ? [newHandler, handlers] : [handlers, newHandler]
  } else {
    events[name] = newHandler
  }
  ...
}

3. compile/codegen/index.js

function genData(){
  if (el.events) {
    data += `${genHandlers(el.events, false, state.warn)},`
  }
}

4. compile/codegen/events.js

function genHandler() {
  ...
  if (!handler.modifiers) {
    if (isMethodPath || isFunctionExpression) {
      return handler.value
    }
    /* istanbul ignore if */
    if (__WEEX__ && handler.params) {
      return genWeexHandler(handler.params, handler.value)
    }
    return `function($event){${handler.value}}` // inline statement
  }
  ...
}

经过这一步 大概会变成{ on: { click: function($events) { .... 里面是我们在html中写的代码 ... } } }，再经过render转化为实例的events。源码中体现为:

  const data = el.plain ? undefined : genData(el, state)
  const children = el.inlineTemplate ? null : genChildren(el, state, true)
  // _c createElement
  code = `_c('${el.tag}'${
    data ? `,${data}` : '' // data
  }${
    children ? `,${children}` : '' // children
  })`

5. core/instance/events.js
   利用apply将第一个参数覆盖所以在v-on中我们既可以用arguments[0],又可以用$event获取第一个参数。

Vue.prototype.$emit = function() {
  ...
  if (cbs) {
    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}"`)
      }
    }
  }
  ...