vue v-on绑定事件时函数名加与不加括号的区别

Question

在原生js中调用函数是需要加括号的，为什么vue中v-on绑定的事件都没加，这里是vue底层做了封装吗，我不是太明白这一点，有没有人可以举例子说明一下吗

Answer 1

v-on的值分俩种情况:

简单取值路径或者函数表达式

简单路径例如:

• v-on="a"
• v-on="a.b"
• v-on="obj.foo"

函数表达式如:

• v-on="() => console.log(1)"
• v-on="function() { console.log(1) }"

满足这个条件的值会被处理成函数调用, 也即是说, 你不用提供圆括号.

• a 处理为 a()
• a.b 处理为 a.b()
• obj.foo 处理为 obj.foo()
• () => console.log(1) 处理为 (() => console.log(1))()
• function() { console.log(1) } 处理为 (function() { console.log(1) })()

非简单取值路径也非函数表达式

除去上面提到的两种情况, 其他情况下 v-on 的值会被包裹进一个函数声明内.

• a ? b : c 处理为 function($event) { a ? b : c }
• b($event.target.value) 处理为 function($event) { b($event.target.value) }

这就是为什么你可以使用 $event 变量的原因.

Answer 2

区别在于传参数的时候