通过编译源码解析Vue不同方式监听事件的区别(HTML原生元素篇)

161 阅读1分钟

前言

通过编译源码解析在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)"

结语

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