Vite中箭头函数计数器正常，函数声明改写后点击失效？

核心问题：事件监听器的参数错误 #

你改写后的代码里，这一行是关键错误：

element.addEventListener('click', setCounter(++counter))

这里你直接执行了setCounter(++counter)，并把函数执行的返回值（setCounter没有返回值，所以是undefined）传给了addEventListener。事件监听器需要的是一个函数引用作为回调，而不是立即执行函数后的结果。所以实际上你给点击事件绑定的是undefined，自然点击时不会有任何反应。

而原代码中的箭头函数：

element.addEventListener('click', () => setCounter(++counter))

是一个延迟执行的回调包装器——它本身是一个函数引用，只有当点击事件触发时才会被调用，此时才会执行setCounter(++counter)，实现点击更新计数器的逻辑。

你的误解点 #

你误以为把setCounter(++counter)直接传给事件监听器，和用箭头函数包裹它是等价的，但两者的本质完全不同：

• 前者是立即执行函数，页面加载时就会调用setCounter，并把返回值绑定给事件
• 后者是传递函数引用，只有事件触发时才会执行内部的逻辑

为什么此处必须用包装函数（箭头函数/普通函数表达式） #

这不是偏好选择，而是逻辑需求决定的：

1. 延迟执行时机：我们需要的是点击按钮时才去更新计数器，而不是页面初始化时就执行更新逻辑
2. 传递自定义参数：如果直接把setCounter作为回调传给addEventListener，事件触发时会自动把事件对象作为参数传给setCounter，而不是我们想要的++counter。包装函数可以帮我们在调用setCounter时传递正确的自定义参数，同时忽略事件对象（如果不需要的话）。

如果不想用箭头函数，也可以用普通函数表达式实现同样的效果：

element.addEventListener('click', function() {
  setCounter(++counter)
})

内容的提问来源于stack exchange，提问作者tazboy