V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
buynonsense
V2EX  ›  Vue.js

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

  •  
  •   buynonsense · 230 天前 · 1402 次点击
    这是一个创建于 230 天前的主题,其中的信息可能已经有所发展或是发生改变。
    我们来看一下这里:
    <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
    cxe2v
        1
    cxe2v  
       230 天前   ❤️ 1
    @click="isRegister =true;clearRegisterData();" 引号内被当成 js 语句执行
    @click="isRegister = true;clearRegisterData;" 引号内被当成 js 语句执行
    @click="clearRegisterData" 引号内是函数引用
    yooomu
        2
    yooomu  
       230 天前
    当你仅仅传入 clearRegisterData ,如果这是一个函数,vue 会传入事件携带的参数并调用。另外两种情况,你传入了一个表达式,但前者你显式进行了函数调用,所以是生效的。而后者并没有,所以结果显而易见
    NessajCN
        3
    NessajCN  
       230 天前
    首先 onclick 的赋值需要是一个函数,譬如你这里的 clearRegisterData
    然后,你可以事先定义好这个函数,譬如 clearRegisterData ,或者用类似定义匿名函数的方法在赋值时候定义赋值的函数,譬如 {isRegister =true;clearRegisterData();}
    这样做等价于 const onclick = () => {isRegister =true;clearRegisterData();} onclick=onclick
    buynonsense
        5
    buynonsense  
    OP
       230 天前
    @cxe2v 恍然大悟,但它这是根据什么来判别被当成 js 语句还是其他的?
    chobitssp
        6
    chobitssp  
       230 天前
    https://cn.vuejs.org/guide/essentials/event-handling.html#method-vs-inline-detection

    @click="isRegister = true;clearRegisterData;"
    等同于
    ()=>{ isRegister = true;clearRegisterData; }
    buynonsense
        7
    buynonsense  
    OP
       230 天前
    @MackMa 这我得好好看一番了
    sujin190
        8
    sujin190  
       230 天前
    @buynonsense #5 语法解析啊,jsx 的编译本来就要做 js 的语法解析,语法解析完了自然知道是函数名还是表达式
    zangbianxuegu
        9
    zangbianxuegu  
       230 天前
    @click="clearRegisterData" -> @click="clearRegisterData()"
    Vue 的写法太多,语法太多,语法糖太多……
    RabbitDR
        10
    RabbitDR  
       230 天前
    KisekiRemi
        11
    KisekiRemi  
       230 天前
    @buynonsense 可以看编译后是什么样的
    iOCZS
        12
    iOCZS  
       230 天前
    要么传递函数,要么传递语句。当然从语法角度讲,应该传递一个函数,语句有点邪路。。。
    wangtian2020
        13
    wangtian2020  
       230 天前
    gitdoit
        14
    gitdoit  
       229 天前
    前端就是语法糖太多, 为了简化,一个东西 N 种写法,反而会导致更多的心智负担
    buynonsense
        15
    buynonsense  
    OP
       224 天前
    @RabbitDR 噢!这真是一个好工具,我都不知道
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5610 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 01:33 · PVG 09:33 · LAX 17:33 · JFK 20:33
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.