VueJS - 传递函数名称和调用之间的区别答案

【问题标题】：VueJS - Difference between passing function name and callVueJS - 传递函数名称和调用之间的区别
【发布时间】：2017-08-25 10:25:59
【问题描述】：

假设我们有一个带有@click 的元素。通过名称传递给它的函数和使用它的调用之间的真正区别是什么，因为这两种方式都有效。它是否为调用创建了另一个抽象级别的底层？是一种首选方式吗？

<element @click="functionName"></element>
<element @click="functionName()"></element>

【问题讨论】：

标签： javascript vuejs2 frontend

【解决方案1】：

如果你使用它的名字，Event 对象被传递给函数。如果您需要访问 event.target，这很有用。

<element @click="functionName"></element>

functionName(x){
    console.log(x)
}

output (example as it'll change based on the event):
MouseEvent {isTrusted: true, screenX: 494, screenY: 88, clientX: 494, clientY: 22, …}

如果您引用完整的函数调用，您就是在明确声明传递给函数的内容。

<element @click="functionName()"></element>

functionName(x){
    console.log(x)
}

output:
undefined

或者再次定义一些东西：

<element @click="functionName('foo')"></element>

functionName(x){
    console.log(x)
}

output:
foo

【讨论】：

是的，我知道这一点。我的问题是，当您在函数中没有/使用任何参数时，底层发生了什么。像，只通过它的名字调用函数更快吗？
我不知道任何显着的性能差异。如果有差异，它可能非常小。您应该使用调用该函数所需的任何一个。如果我不使用事件，那么我只使用 ()。