前言
通过编译源码解析在Vue(SFC)中不同方式监听事件的区别,让你在编码时找到正确的姿势
click
事件绑定
我们首先看看原生button
元素的click
事件绑定:
小结
- 图中显示了四种事件绑定方式,并且通过编译源码发现:
v-on:click
@click
:onClick
v-bind:onClick
这四种方式,监听click
事件,其执行结果和编译源码是完全一样的 - 并且触发事件时会传递事件对象
$event
@click
和:onClick
的差异
接下来我们继续尝试不同的写法,探究其中的差别
小结
- 通过编译源码我们发现:
@click="handler"
@click="handler($event)"
@click="e => handler(e)"
:onClick="handler"
:onClick="e => handler(e)"
其执行结果是完全一样的 @click="handler($event, '其他参数'...)"
@click="e => handler(e, '其他参数'...)"
:onClick="e => handler(e, '其他参数'...)"
等方式可以传递事件对象$event
以外的其他参数@click="handler($event)"
@click="e => handler(e)"
会第一次render
时,创建一个匿名函数
,保存到cache
中以缓存事件处理函数,二次render
时跳过不必要的函数创建步骤,减少内存分配和垃圾回收的压力,以优化性能:onClick="e => handler(e)"
方式每次render
时候,都会重新创建一个匿名函数
,花销较大@click="handler"
:onClick="handler"
方式handler
函数会在setup
执行的时候创建一次,所以不需要保存到cache
对象中:onClick="handler($event)"
方式是错误的用法,这种用法会导致onClick
绑定了handler($event)
执行后的返回值
最后总结
- 在Vue(SFC)中通过
@eventName
:onEventName
等方式都可以监听事件,并且@eventName
最后也是编译为:onEventName
形式 - 更推荐使用
@eventName
的方式监听事件,因为Vue会在编译的时候优化其性能 - 各种绑定事件方式性能排序:
@click="handler"
=:onClick="handler"
>@click="handler($event)"
=@click="e => handler(e)"
>:onClick="e => handler(e)"
结语
感谢您的耐心阅读,如果觉得这篇文章对您有帮助和启发,麻烦给个大大的赞~