div class="outdated">这是一个创建于 622 天前的主题，其中的信息可能已经有所发展或是发生改变。
我们来看一下这里：
<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"时，函数生效。
我都是使用的函数引用为什么会导致这样两种不同的结果？
<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"时，函数生效。
我都是使用的函数引用为什么会导致这样两种不同的结果？
 | 1 cxe2v 2024-03-20 17:48:08 +08:00  1 |
 | 2 yooomu 2024-03-20 17:48:11 +08:00 当你仅仅传入 clearRegisterData ，如果这是一个函数，vue 会传入事件携带的参数并调用。另外两种情况，你传入了一个表达式，但前者你显式进行了函数调用，所以是生效的。而后者并没有，所以结果显而易见 |
 | 3 NessajCN 2024-03-20 17:50:25 +08:00 首先 onclick 的赋值需要是一个函数，譬如你这里的 clearRegisterData 然后，你可以事先定义好这个函数，譬如 clearRegisterData ，或者用类似定义匿名函数的方法在赋值时候定义赋值的函数，譬如 {isRegister =true;clearRegisterData();} 这样做等价于 const Onclick= () => {isRegister =true;clearRegisterData();} Onclick=onclick |
 | 4 MackMa 2024-03-20 17:54:51 +08:00 |
 | 5 buynonsense OP @cxe2v 恍然大悟，但它这是根据什么来判别被当成 js 语句还是其他的？ |
 | https://cn.vuejs.org/guide/essentials/event-handling.html#method-vs-inline-detection @click="isRegister = true;clearRegisterData;" 等同于 ()=>{ isRegister = true;clearRegisterData; } |
| 7 buynonsense OP @MackMa 这我得好好看一番了 |
 | 8 sujin190 2024-03-20 18:23:15 +08:00 @buynonsense #5 语法解析啊，jsx 的编译本来就要做 js 的语法解析，语法解析完了自然知道是函数名还是表达式 |
 | 9 zangbianxuegu 2024-03-20 18:33:19 +08:00 |
 | 10 RabbitDR 2024-03-20 21:25:31 +08:00 vue 的编译器做了太多事情。 举一反三，当你想知道 vue 会怎样，或者为什么会这样的时候。去 vue sfc playground 写一下你的代码，然后看看输出的 js 就大概明白了。 举例，三个写法输出的代码是 https://play.vuejs.org/#eNqdkk1vwjAMhv9KlAtDQuWwnaCgfXHYDhtiO+aSFbcLpEmUD0BC/e9zWsrHhkBaT43fx5Zf21v6YEyyCkAHNHWZFcYTBz6YMVOiNNp6siUWclKR3OqSdBDtMMVUppXzqBTCebDP3HMyiuBNt9WEm+3UnZJz6aA7PGRnErhtoV2Jmy4Zjck2QuSkfLLiMkASHFjFS0C008FaZyHDnVtrO78IWZj+wiqm0n4zBLSPDw+lkdwDvghJv4L3WpH7TIpsOWL0xKC3AYZ/HeE46DjtN6n/L3O1yJWMtH9khfaod7iBXBTJwmmFq8d5E4JVdGmEBPtuvMANMTqImyD4Mcql1OvXOhab7LXx7Buy5Zn4wm1ijNGpBdzZChjda57bAnwjTz7eYIP/e7HU8yCRviDOwGkZYo8N9hjUHNs+4upuX+oDFqr4dJONB+VaU7HRSFY1zyge9dMF64d2b5O7Og9vhVY/DPYasw== 点击的时候会执行 onClick ，最终结果一目了然。 |
 | 11 KisekiRemi 2024-03-20 22:01:43 +08:00 @buynonsense 可以看编译后是什么样的 |
 | 12 iOCZS 2024-03-20 23:21:33 +08:00 要么传递函数，要么传递语句。当然从语法角度讲，应该传递一个函数，语句有点邪路。。。 |
 | 13 wangtian2020 2024-03-21 09:05:12 +08:00 "内联代码方式变得不够灵活。因此 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 |
 | 14 gitdoit 2024-03-21 09:34:22 +08:00 前端就是语法糖太多, 为了简化,一个东西 N 种写法,反而会导致更多的心智负担 |
| 15 buynonsense OP @RabbitDR 噢！这真是一个好工具，我都不知道 |
Select Language