Vue/Nuxt中@click直接调用与包裹函数调用方法的区别

两种写法在你当前的待办更新代码场景下运行效果完全一致，但并非只是编码偏好的选择，两者存在明确的行为差异，只是你当前的代码逻辑刚好没有触发差异场景而已。

两种写法的编译本质 #

Vue处理模板事件绑定时，会把绑定的表达式统一包装成浏览器可执行的事件回调，两种写法的编译结果非常接近：

• 写法1：@click="updateTodo(todo.id)"
  编译后生成的回调逻辑等价于：

  function clickHandler(...nativeEventArgs) {
    return updateTodo(todo.id)
  }
  

  你在表达式里主动传入了目标参数todo.id，没有用到回调默认传入的原生点击事件对象，所以逻辑完全符合预期。
• 写法2：@click="() => updateTodo(todo.id)"
  编译后生成的事件回调就是你书写的箭头函数本身，点击触发时先执行这个箭头函数，再在函数内部调用updateTodo传入参数，运行结果和写法1没有区别。

实际存在的差异 #

两种写法的区别只在特定场景下会体现：

• 参数拓展的直观性不同
  如果你后续需要同时拿到点击事件对象做额外处理（比如阻止默认行为、获取按钮属性），箭头函数的写法逻辑更直白：

  <NButton @click="(e) => updateTodo(todo.id, e)">Add</NButton>
  

  直接调用的写法也能实现同样效果，只是需要手动记住Vue提供的$event占位符：

  <NButton @click="updateTodo(todo.id, $event)">Add</NButton>
  

• 编码习惯的容错性不同
  不少新手刚学Vue事件绑定时，很容易搞混「调用函数传参」和「直接传函数引用」的区别：要是不小心写成@click="updateTodo"，点击触发时函数拿到的第一个参数是原生点击事件对象，根本拿不到预期的todo.id，直接触发逻辑bug。
  很多教程统一用箭头函数包裹的写法，本质是从编码规范上堵死这个出错可能——只要看到箭头函数块，就明确是自定义传参的逻辑，不会和直接绑定函数引用的写法混淆。

最终结论 #

你当前测试的两种写法在现有逻辑下没有任何运行时差异，不存在性能损耗或者隐藏bug，选哪种都可以。唯一需要注意的是，如果选择直接写函数调用的写法，不要漏写传参的括号和目标参数，避免误写成函数引用绑定导致参数错误。

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