vue3 lodash 防抖函数写在click中不生效?

作者站长头像
站长
· 阅读数 8

我在utils的public.ts封装了一个方法

import _ from 'lodash'
// 节流
export const getDebounce = (fn: (e: Event) => void, count: number) => _.debounce(fn, count)

login.vue使用

import { getDebounce } from '@/utils/public'
const login = () => { console.log(123) }
<el-button @click="getDebounce(login,1000)">登录</el-button>

但这样写不生效,换成下面写法就生效了

const login = () => { console.log( 123 ) }
const loginDe = getDebounce(login, 1000)

<el-button  @click="loginDe">登录</el-button>

在我看来 他们两是一个意思,为什么上面不生效?

回复
1个回答
avatar
test
2024-07-04

并不是一个意思,vue的事件绑定可以绑定一个回调函数,也可以是一段回调函数体,当你绑定的是一个函数名时【即你描述中下面那种】,它的回调函数就是该函数,而如果绑定的不是一个函数名,那么就会自动包裹一层匿名函数,也就是说<el-button @click="getDebounce(login,1000)">登录</el-button>这个会被视为<el-button @click="() => getDebounce(login,1000)">登录</el-button>

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容