Vue与原生JS函数调用加括号的区别

作者：青团子

时间：2026-10-23

本文详细解析Vue与原生JavaScript中函数调用加括号的区别。原生JS中，不加括号赋值给事件处理器仅传递函数引用，而加括号会立即执行。Vue中两者均触发执行，但加括号需配合$event获取事件对象或传递自定义参数，不加括号则默认传入MouseEvent。

文章目录

前言：在维护一个较早的项目时，由于无法使用Vue等现代框架，部分功能采用原生JavaScript实现。在绑定点击事件时，发现方法名未加括号则无效，加上括号后生效。此前在Vue项目中，不加括号也能正常工作，因此对此差异进行了深入研究。

原生JavaScript中的函数调用

原生方法调用函数

在<script>标签中定义方法时，如果不加括号，赋值操作相当于获取该函数的引用（即函数体本身），而不会立即执行该函数。


<body>
  <div>函数调用是否要加括号</div>
  <button>点击变色</button>
  <script type="text/javascript">
   var div = document.getElementsByTagName('div')[0];
   var btn = document.getElementsByTagName('button')[0];
 
    function reset(){
      div.style.color='green'
    }
    btn.onclick = reset //1.这种情况相当于 btn.onclick = function reset(){...} ，点击之后执行这个事件。得到是函数体
    btn.onclick = reset() //2.这种情况可以理解成给函数外面加了括号成了自执行函数，不用点击就得到了一个函数执行后面的结果
 
  </script>
</body>

上述两种情况大家通常都清楚，不会产生疑惑。使用习惯Vue方法调用后，再接触原生JavaScript时产生的疑惑点在于行内绑定方法的情况。

原生JavaScript中的函数调用


  <div>函数调用是否要加括号</div>
  <button onclick="reset()">点击变色</button>
  <script type="text/javascript">
   var div = document.getElementsByTagName('div')[0];
   var btn = document.getElementsByTagName('button')[0];
 
    function reset(){
      div.style.color='green'
    }

在原生JavaScript的行内事件绑定中，必须加上()才能触发执行。具体原因较为复杂，容易让人混淆，欢迎大家解答。