应该是 Vue 对函数调用表达式额外用了一个函数做了层包装。
事先说明：加与不加括号的区别在于事件对象参数 event 的处理。不加括号时，函数第一个参数为 event，加了括号后，需要手动传入 $event 才能获得事件对象。
1、如果事件绑定的方法没有参数可以选择加括号也可以不加括号
1 <template>
2 <div>
3 <input type="button" value="按钮1" v-on:click="fn">
4 <input type="button" value="按钮2" v-on:click="fn()">
5 </div>
6 </template>
7
8 <script>
9 export default { 10 data() { 11 return { 12 a:10
13 } 14 }, 15 methods:{ 16 fun(){ 17 console.log(this.a) 18 } 19 } 20 } 21 </script>
上面的函数调用的时候，加不加括号，效果是一样的。
2、如果不加括号，函数的第一个参数为 event 。
1 <template>
2 <div>
3 <input type="button" value="按钮1" v-on:click="fn">
4 </div>
5 </template>
6
7 <script>
8 export default { 9 data() { 10 return { 11 a:10
12 } 13 }, 14 methods:{ 15 fun(e){ 16 console.log(e) 17 } 18 } 19 } 20 </script>
3、如果加了括号，需要手动传入 $event 才能获得事件对象。
<template>
<div>
<input type="button" value="按钮1" v-on:click="fn($event)">
</div>
</template>
<script> export default { data() { return { a:10 } }, methods:{ fun(e){ console.log(e) } } } </script>
如果 v-on:click="fn()" 这里不手动添加 $event ，那么 fun 函数里面的 console.log(e) 打印出来的就是 undefined 。
4、父子组件的引用：
涉及到父子组件的引用，有时候需要传递额外的参数，必须加括号，第一个参数为 $event ，后面跟额外的参数，具体可参考 vue父子组件之间的传额外的参数