关于vue ，v-on 绑定事件时，函数名加括号和不加括号的区别

Posted 2020-08-31

作者：DDFE
链接：https://www.zhihu.com/question/55753541/answer/146504270
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

从官方的文档 事件处理器 — Vue.js 中可以看出通过 `v-on` 中既可以执行一段代码、一个方法、内联 javascript 语句，根据不同的情况 Vue 会做不同的处理，具体可以从源码中可以看出（2.1.10版本），在编译阶段，会根据抽象html语法树生成代码，从 https://github.com/vuejs/vue/blob/v2.1.10/src/compiler/codegen/index.js#L194 可以看出如果此时包含了事件处理，则会调用 `genHandlers` 生成事件处理代码，最终走到 https://github.com/vuejs/vue/blob/v2.1.10/src/compiler/codegen/events.js#L46 ，这里有两个正则判断，判断是函数正则以及属性访问正则，如果两个正则匹配成功则直接返回当前的值，否则用 `function($event){${handler.value}}` 包裹一次。 针对于你的疑问来说，如果说你是直接给定的 `greet` 的话，则属性访问正则匹配成功，如果是`greet()` 或者 `x+=1` 来说，则两个正则都匹配失败，利用函数包裹一层；而额外的第一种判断函数的正则则只有是你写的是函数的时候才会匹配成功，也就是类似于 `function () {xxx}` 或者 `() => dsf` 也就是一个匿名函数或者箭头函数。

最后，到底需不需要加括号的话，一般就是要看参数的情况了： 1、不需要参数或者默认参数的情况下，用一个定义的方法名即可。此时有一个需要注意的就是默认参数的情况，对于原生的事件处理的话，参数就只有一个：事件对象event；而对于自定义事件的话，则是在 emit 的时候传入的参数是什么，这个定义的方法被调用的时候的参数也是一一对应的。 2、自定义参数，这个参数有可能是你在HTML上直接写的`greet(‘xx‘)`，也有可能是在特殊上下文中得到的，例如说在 `v-for` 内部，可以传入当前循环项；这种情况下则是当一段代码片段来执行的，此时正是因为包裹的函数是有`$event`参数的，所以可以使用这个；你可能还会发现此时还可以这样写：`greet(arguments)`，传入的就是`arguments`对象，把调用定义方法的参数在形式上是可以由多个变为一个的。

 

这是本人在知乎上提的问题，在此再一次感谢答主DDFE