前言

通过编译源码解析在Vue(SFC)中不同方式监听事件的区别，让你在编码时找到正确的姿势

click事件绑定

我们首先看看原生button元素的click事件绑定：

相关源码

小结

1. 图中显示了四种事件绑定方式，并且通过编译源码发现：v-on:click @click :onClick v-bind:onClick这四种方式，监听click事件，其执行结果和编译源码是完全一样的
2. 并且触发事件时会传递事件对象$event

@click和:onClick的差异

接下来我们继续尝试不同的写法，探究其中的差别

相关源码

小结

1. 通过编译源码我们发现：@click="handler" @click="handler($event)" @click="e => handler(e)" :onClick="handler" :onClick="e => handler(e)" 其执行结果是完全一样的
2. @click="handler($event, '其他参数'...)" @click="e => handler(e, '其他参数'...)" :onClick="e => handler(e, '其他参数'...)" 等方式可以传递事件对象$event以外的其他参数
3. @click="handler($event)" @click="e => handler(e)" 会第一次render时，创建一个匿名函数，保存到cache中以缓存事件处理函数，二次render时跳过不必要的函数创建步骤，减少内存分配和垃圾回收的压力，以优化性能
4. :onClick="e => handler(e)" 方式每次render时候，都会重新创建一个匿名函数，花销较大
5. @click="handler" :onClick="handler" 方式handler函数会在setup执行的时候创建一次，所以不需要保存到cache对象中
6. :onClick="handler($event)" 方式是错误的用法，这种用法会导致onClick绑定了handler($event)执行后的返回值

最后总结

1. 在Vue(SFC)中通过@eventName :onEventName 等方式都可以监听事件，并且@eventName最后也是编译为:onEventName形式
2. 更推荐使用@eventName的方式监听事件，因为Vue会在编译的时候优化其性能
3. 各种绑定事件方式性能排序：@click="handler" = :onClick="handler" > @click="handler($event)" = @click="e => handler(e)" > :onClick="e => handler(e)"

结语

感谢您的耐心阅读，如果觉得这篇文章对您有帮助和启发，麻烦给个大大的赞~