哎呀,你着急什么,现在又不用(Vue3事件侦听器优化)

59 阅读2分钟

6334e5f477dd87973bcbc468c7b2fb9a.jpg

哎呀,你着急什么,现在又不用(Vue3事件侦听器优化)

事件侦听器优化

Vue 3 中的事件侦听器优化是一种性能优化技术,它通过使用事件委托和事件侦听器的懒加载来减少不必要的事件处理和 DOM 操作,从而提高应用程序的性能。

对比Vue2

在 Vue 2 中,当在模板中使用 v-on 指令来绑定事件侦听器时,每个事件侦听器都会在创建相应的 DOM 元素时立即被添加到该元素上。这意味着即使在某些情况下,事件可能永远不会被触发,事件侦听器仍然会被创建和附加到 DOM 元素上。  
在 Vue 3 中,事件侦听器的优化通过使用事件委托和事件侦听器的懒加载来解决这个问题。当在模板中使用 v-on 指令来绑定事件侦听器时, Vue 不会立即将事件侦听器附加到相应的 DOM 元素上。相反,它会将事件侦听器存储在一个事件监听器对象中,并在需要时动态地将它们附加到相应的 DOM 元素上。

具体来说, Vue 3 使用事件委托来将事件侦听器附加到父元素上,而不是直接附加到子元素上。这意味着即使有大量的子元素需要添加事件侦听器,也只需要将一个事件侦听器附加到父元素上即可。当子元素触发事件时,父元素会捕获该事件并根据事件类型和事件名称来触发相应的事件侦听器。

此外, Vue 3 还使用了事件侦听器的懒加载。当事件侦听器被添加到事件监听器对象中时,它们不会立即被执行。只有当事件被触发时,才会执行相应的事件侦听器  
在 Vue 3 中,事件侦听器的优化通过事件委托和事件侦听器的懒加载来实现。这可以减少不必要的事件处理和 DOM 操作,提高应用程序的性能。