javascript - 为什么 v-on :click ="method()" is treat as a method declaration like the v-on:click ="method"?

Question

考虑这个例子https://codesandbox.io/s/1yvp4zz5x7?module=%2Fsrc%2FApp.vue

<template>
  <div>
    <button v-on:click="method">Greet1</button>
    <button v-on:click="method()">Greet2</button>
  </div>  
</template>

<script>
  export default {
    methods: {
      method() {
        alert('Hello');
      }
    }
  };
</script>

尽管在“Greet1”中的 v-on:click 中有 方法，但两个按钮的工作方式完全相同(我知道第一个示例中传递了事件)声明，在“Greet2”中有方法调用。

“Greet2”不应该在组件渲染阶段显示警告吗？这个按钮不应该在点击时起作用，因为我没有在 method() 中返回函数？

这里为什么会有这个机制，它是如何工作的？

Answer 1

该方法不会立即调用，因为在渲染模板之前，它会被编译成一个函数。在编译过程中，v-on 点击表达式被 Vue 解析并以两种不同的方式处理。本质上，在

的情况下编译模板时会发生什么

<button v-on:click="method">Greet1</button>

是click handler直接设置为method。在

的情况下

<button v-on:click="method()">Greet2</button>

点击处理程序设置为

function($event) { method() }

整个编译后的渲染函数被包装在 with(this) 中，以便 method() 和其他以这种方式声明的东西被正确解析。

这是一个小片段 from the generated code这表明这是如何决定的。

var fnExpRE = /^\s*([\w$_]+|\([^)]*?\))\s*=>|^function\s*\(/;
var simplePathRE = /^\s*[A-Za-z_$][\w$]*(?:\.[A-Za-z_$][\w$]*|\['.*?']|\[".*?"]|\[\d+]|\[[A-Za-z_$][\w$]*])*\s*$/;

...many lines omitted...

var isMethodPath = simplePathRE.test(handler.value);
var isFunctionExpression = fnExpRE.test(handler.value);

if (!handler.modifiers) {
  if (isMethodPath || isFunctionExpression) {
    return handler.value
  }

  return ("function($event){" + (handler.value) + "}") // inline statement
}

如果您通读以上链接的代码，则有问题的函数是 genHandler(对于这个特定版本的 Vue，即 2.5.13)。