在Vue中调用方法时的括号答案

【问题标题】：Parentheses while calling a method in Vue在Vue中调用方法时的括号
【发布时间】：2026-01-30 23:25:01
【问题描述】：

在 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>

在上面的代码 sn-p 中，两个输入字段上的输入事件都很好地触发了changeName，尽管一个带有括号 () 而一个没有。

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

https://vuejs.org/v2/guide/events.html#Method-Event-Handlers 对此进行了很好的解释。

基本上，事件处理程序可以是

方法名，如@input="changeName"
有效的 Javascript 语句，例如 @input="changeName()" 或 @input="userName = 'Name '+Math.random()"

Vue 会自动执行检查以检测是哪种情况。

如果您有兴趣，请在https://github.com/vuejs/vue/blob/19552a82a636910f4595937141557305ab5d434e/dist/vue.js#L10086 查看此核心代码。

var handlerCode = isMethodPath
  ? ("return " + (handler.value) + "($event)")
  : isFunctionExpression
    ? ("return (" + (handler.value) + ")($event)")
    : handler.value;

【讨论】：

【解决方案2】：

确实，这两种情况在 Vue 中都是有效的。但也有一些不同。

引用：https://forum.vuejs.org/t/difference-when-calling-a-method-function-with-or-without-brackets/41764/4

@input="changeName"

事件对象作为第一个传递给事件处理程序仅将方法名称绑定为事件处理程序时的参数。

@input="changeName()"

或者，可以将实际的方法调用用作事件处理程序。这允许您将任何自定义参数传递给该方法。

【讨论】：