当前位置: 首页 > Web前端 > HTML

[Vue]关于v-for批量渲染绑定event事件代理

时间:2023-03-28 15:05:12 HTML

结论:只有在非常多的节点中(v-for渲染数量至少1000多行),使用eventagent会提升一点性能,否则事件绑定每个节点几乎没有区别。首先,vue源码没有做事件代理。vue论坛的开发者回复:https://forum.vuejs.org/t/is-...例子证明:https://blog.csdn.net/supming...事件代理的主要作用是什么?1、动态生成和销毁子节点时,不需要主动维护子节点事件。(维护子节点事件:addEventListener、removeEventListener)2、用一个父节点代表多个子节点事件处理器,减少内存开销,提高整体性能。从vue的角度来看1.在使用v-for时,使用v-on:或@这种简单的语法可以为批量渲染的每个元素绑定事件;而当组件被销毁时,vue也会自动帮我们移除所有的事件处理器。所以事件代理的第一个功能vue已经帮我们搞定了。2.在v-for中,所有元素都绑定到同一个事件。所以除非大量的元素被批量渲染,一般情况下,事件可以直接绑定到每个子元素上。在少量v-for渲染的情况下,使用事件代理的性能差别不大。在这种情况下,不需要使用事件代理。性能差异:生成100000个span节点,通过devTools中的performancemonitor监控内存占用和事件监听数量,对比以下三种情况:1.没有使用事件代理,每个span节点绑定一个点击事件,并指向同一个事件处理程序

{{item}}
2.不使用事件代理,每个span节点绑定一个点击事件,指向不同的事件处理器
{{item}}
3.使用事件代理{{item}}
可以看到也就是说在第三张图使用事件代理的情况下,监听数和内存占用都比之前两种方式要少。同时对比三张图的监听数和以往阅读vue源码的过程,并没有发现vue会自动充当事件代理,但一般在给v-for绑定事件时,节点会指向同一个事件处理程序(上面第二种情况可以运行,但是eslint会警告),在一定程度上,这比为每个生成的节点绑定不同的事件处理程序要好,但监听器的数量仍然会不会改变,所以使用事件代理会更好。(事件代理方式只使用一个监听器,而直接绑定方式使用10万个监听器)以上批量渲染示例和图片来自:https://github.com/Advanced-F...