这是一个创建于 252 天前的主题，其中的信息可能已经有所发展或是发生改变。
我们来看一下这里：
<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"时，函数生效。
我都是使用的函数引用为什么会导致这样两种不同的结果？
15 条回复 • 2024-03-26 11:34:55 +08:00
 |
1
cxe2v 252 天前  1
|
 |
2
yooomu 252 天前
当你仅仅传入 clearRegisterData ，如果这是一个函数，vue 会传入事件携带的参数并调用。另外两种情况，你传入了一个表达式，但前者你显式进行了函数调用，所以是生效的。而后者并没有，所以结果显而易见
|
 |
3
NessajCN 252 天前
首先 onclick 的赋值需要是一个函数，譬如你这里的 clearRegisterData
然后，你可以事先定义好这个函数，譬如 clearRegisterData ，或者用类似定义匿名函数的方法在赋值时候定义赋值的函数，譬如 {isRegister =true;clearRegisterData();} 这样做等价于 const onclick = () => {isRegister =true;clearRegisterData();} onclick=onclick |
 |
4
MackMa 252 天前
|
 |
5
buynonsense OP @cxe2v 恍然大悟，但它这是根据什么来判别被当成 js 语句还是其他的？
|
 |
6
chobitssp 252 天前
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 252 天前
@buynonsense #5 语法解析啊，jsx 的编译本来就要做 js 的语法解析，语法解析完了自然知道是函数名还是表达式
|
 |
9
zangbianxuegu 252 天前
|
 |
10
RabbitDR 252 天前
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 252 天前
@buynonsense 可以看编译后是什么样的
|
 |
12
iOCZS 252 天前
要么传递函数，要么传递语句。当然从语法角度讲，应该传递一个函数，语句有点邪路。。。
|
 |
14
gitdoit 252 天前
前端就是语法糖太多, 为了简化,一个东西 N 种写法,反而会导致更多的心智负担
|
|
15
buynonsense OP @RabbitDR 噢！这真是一个好工具，我都不知道
|
Select Language