Vue3 请教’函数引用‘和’函数调用‘的问题

[buynonsense]

我们来看一下这里：
<el-link @click="isRegister =true;clearRegisterData();">

clearRegisterDate()是一个初始化函数，它是这样定义的：
const clearRegisterData = () => {

registerData.value.username = '';
registerData.value.password = '';
registerData.value.rePassword = '';
}

当我使用 @click="isRegister =true;clearRegisterData();" 函数生效

当我使用 @click="isRegister = true;clearRegisterData;" 函数失效；

当我使用 @click="clearRegisterData"时，函数生效。

我都是使用的函数引用为什么会导致这样两种不同的结果？

[cxe2v]

@click="isRegister =true;clearRegisterData();" 引号内被当成 js 语句执行
@click="isRegister = true;clearRegisterData;" 引号内被当成 js 语句执行
@click="clearRegisterData" 引号内是函数引用

[yooomu]

当你仅仅传入 clearRegisterData ，如果这是一个函数，vue 会传入事件携带的参数并调用。另外两种情况，你传入了一个表达式，但前者你显式进行了函数调用，所以是生效的。而后者并没有，所以结果显而易见

[NessajCN]

首先 onclick 的赋值需要是一个函数，譬如你这里的 clearRegisterData
然后，你可以事先定义好这个函数，譬如 clearRegisterData ，或者用类似定义匿名函数的方法在赋值时候定义赋值的函数，譬如 {isRegister =true;clearRegisterData();}
这样做等价于 const onclick = () => {isRegister =true;clearRegisterData();} onclick=onclick

[MackMa]

https://github.com/vuejs/core/blob/ab59bedae4e5e40b28804d88a51305b236d4a873/packages/compiler-core/src/transforms/vOn.ts#L32

[buynonsense]

@cxe2v 恍然大悟，但它这是根据什么来判别被当成 js 语句还是其他的？

[chobitssp]

https://cn.vuejs.org/guide/essentials/event-handling.html#method-vs-inline-detection

@click="isRegister = true;clearRegisterData;"
等同于
()=>{ isRegister = true;clearRegisterData; }

[buynonsense]

@MackMa 这我得好好看一番了

[sujin190]

@buynonsense #5 语法解析啊，jsx 的编译本来就要做 js 的语法解析，语法解析完了自然知道是函数名还是表达式

[zangbianxuegu]

@click="clearRegisterData" -> @click="clearRegisterData()"
Vue 的写法太多，语法太多，语法糖太多……

[RabbitDR]

vue 的编译器做了太多事情。
举一反三，当你想知道 vue 会怎样，或者为什么会这样的时候。去 vue sfc playground 写一下你的代码，然后看看输出的 js 就大概明白了。
举例，三个写法输出的代码是
https://play.vuejs.org/#eNqdkk1vwjAMhv9KlAtDQuWwnaCgfXHYDhtiO+aSFbcLpEmUD0BC/e9zWsrHhkBaT43fx5Zf21v6YEyyCkAHNHWZFcYTBz6YMVOiNNp6siUWclKR3OqSdBDtMMVUppXzqBTCebDP3HMyiuBNt9WEm+3UnZJz6aA7PGRnErhtoV2Jmy4Zjck2QuSkfLLiMkASHFjFS0C008FaZyHDnVtrO78IWZj+wiqm0n4zBLSPDw+lkdwDvghJv4L3WpH7TIpsOWL0xKC3AYZ/HeE46DjtN6n/L3O1yJWMtH9khfaod7iBXBTJwmmFq8d5E4JVdGmEBPtuvMANMTqImyD4Mcql1OvXOhab7LXx7Buy5Zn4wm1ijNGpBdzZChjda57bAnwjTz7eYIP/e7HU8yCRviDOwGkZYo8N9hjUHNs+4upuX+oDFqr4dJONB+VaU7HRSFY1zyge9dMF64d2b5O7Og9vhVY/DPYasw==
点击的时候会执行 onClick ，最终结果一目了然。

[KisekiRemi]

@buynonsense 可以看编译后是什么样的

[iOCZS]

要么传递函数，要么传递语句。当然从语法角度讲，应该传递一个函数，语句有点邪路。。。

[wangtian2020]

"内联代码方式变得不够灵活。因此 v-on 也可以接受一个方法名或对某个方法的调用"

如果接受的只是一个方法名，那么会直接调用，其他情况和常规语法一致。语法糖帮你省一个括号()

https://cn.vuejs.org/guide/essentials/event-handling.html#:~:text=%E5%86%85%E8%81%94%E4%BB%A3%E7%A0%81%E6%96%B9%E5%BC%8F%E5%8F%98%E5%BE%97%E4%B8%8D%E5%A4%9F%E7%81%B5%E6%B4%BB%E3%80%82%E5%9B%A0%E6%AD%A4%20v%2Don%20%E4%B9%9F%E5%8F%AF%E4%BB%A5%E6%8E%A5%E5%8F%97%E4%B8%80%E4%B8%AA%E6%96%B9%E6%B3%95%E5%90%8D%E6%88%96%E5%AF%B9%E6%9F%90%E4%B8%AA%E6%96%B9%E6%B3%95%E7%9A%84%E8%B0%83%E7%94%A8

[gitdoit]

前端就是语法糖太多, 为了简化,一个东西 N 种写法,反而会导致更多的心智负担

[buynonsense]

@RabbitDR 噢！这真是一个好工具，我都不知道