Vue.js 在Vue中调用方法时的括号

发布于06月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>

在上面的代码片段中，两个输入字段上的输入事件都会很好地触发changeName，尽管其中一个字段有括号()，另一个字段没有.

推荐答案

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