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

作者:青团子时间:2026-10-23 23:08:02浏览:262

本文详细解析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的行内事件绑定中,必须加上()才能触发执行。具体原因较为复杂,容易让人混淆,欢迎大家解答。

Vue中的函数调用与传参

Vue方法中调用函数

在Vue中,无论是否加括号,方法都会执行。通常加()是为了考虑传参的需求。

  • 如果不加括号,默认传递的参数为MouseEvent对象。
  • 如果加括号,需要在括号中使用$event才能获取到MouseEvent对象。不过,这种加括号的情况,通常是为了传递我们需要的其他参数。

欢迎指正~

本文作者: 张尊娟

本文链接:https://www.cnblogs.com/wszzj/p/13895908.html?utm_source=tuicool&utm_medium=referral

以上就是vue 函数调用加括号与不加括号的区别的详细内容,更多关于vue 函数调用的资料请关注本站其它相关文章!

作者最新文章