Vue的事件绑定与原生js的事件绑定区别

Question

Vue事件绑定和原生js事件绑定，在针对绑定函数是否加括号的处理上为什么会不同？是Vue源码上对事件绑定进行了封装处理造成的么？下面是我理解的4种情况。

function funa(a) {
  alert(a)
}

1. Vue事件绑定函数不加括号@click="funa",
   结果：alert会触发，a为event事件对象.

---

2. Vue事件绑定函数加括号@click="funa()",
   结果：alert会触发，a为undefined;
   若@click="funa('字符串变量')",
   结果：alert会触发，a为字符串变量.

---

3. 原生js事件绑定函数不加括号οnclick="funa",
   结果：alert不会触发 因为这种写法相当于把funa的引用对象赋值给onclick,是不是funa方法或者funa方法的执行赋值给onclick

---

4. 原生js事件绑定函数加括号οnclick="funa()",
   结果：alert会触发，a为undefined; 因为这种写法相当于funa方法的执行赋值给onclick

Answer 1

在js中为元素绑定事件是不需要加括号运行的(除非这是一个高级函数，返回另一个函数，而你需要绑定的是返回的函数)，因为函数运行的优先级高于绑定，所以加括号运行，绑定的其实是函数运行的结果

dom.onclick = fn

而在html中为元素绑定事件需要加括号，因为在html中绑定的事件触发时，是把后面引号内的代码整体拿出来跑，如果没有加引号就不会运行，类似下面这样

<div onclick="fn(event)"></div>
//相当于
dom.onclick = function(event){
    fn(event)
}

在vue中其实和在html中绑定很相似，只是多了一种优化，就是引号内可以是一个函数名，比如函数内的内容为xxx，如果xxx是一个函数名或一个函数表达式，那么直接返回函数进行事件绑定，如果是js代码快，那么会进行函数封装

eval("function($event){" + (handler.value) + "}")