Vue中事件监听器为何支持带()与不带()两种绑定方式？

先看你给出的示例代码，两种写法确实都能正常触发changeName方法，这背后是Vue对事件绑定的两种不同处理逻辑，我给你拆解清楚：

示例代码回顾 #

new Vue({
  el: "#app",
  data: {
    userName: "Hello World!"
  },
  methods: {
    changeName: function(e) {
      this.userName = "Name " + Math.random();
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app">
  <p> {{ userName }} </p>
  <!-- typing in both the input fields trigger changeName -->
  <input @input="changeName()">
  <input @input="changeName">
</div>

1. 不带括号的写法：@input="changeName" #

这种写法是Vue事件绑定的「简洁模式」，Vue会帮你做一件事：自动把原生事件对象作为第一个参数传给目标方法。

就像你定义的changeName(e)，这里的e就是输入框的input事件对象（比如你可以用e.target.value拿到输入内容）。Vue内部近似的处理逻辑是这样的：

input.addEventListener('input', (event) => {
  this.changeName(event)
})

这种写法最适合不需要传自定义参数、但需要用到事件对象的场景，不用手动操心参数传递，Vue会自动处理。

2. 带括号的写法：@input="changeName()" #

这种写法相当于你主动调用了这个方法，默认情况下Vue不会自动传递事件对象。那为什么你的示例里它依然能正常工作？因为你的changeName方法并没有用到e参数——就算e是undefined，方法里修改userName的逻辑照样能跑。

如果你的方法需要用到事件对象，就得手动传递Vue提供的特殊变量$event：

<input @input="changeName($event)">

这时候方法里的e就能拿到事件对象了。另外，这种写法的核心优势是可以传递自定义参数，比如你想给方法传个固定前缀：

methods: {
  changeName(prefix, e) {
    this.userName = prefix + Math.random();
    console.log(e.target.value) // 依然能拿到输入内容
  }
}

模板里就这么写：

<input @input="changeName('新名称-', $event)">

一句话总结 #

• 不带括号：Vue自动注入事件对象，适合无自定义参数、需要用事件对象的场景
• 带括号：需手动传$event拿事件对象，适合要传递自定义参数的场景

你的示例里两种写法都生效，本质是因为方法逻辑不依赖事件对象，所以不管传没传e，都能正常执行~

内容的提问来源于stack exchange，提问作者void