Vue中的事件委托优化-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40283784/article/details/86134482

文章探讨了在Vue项目中，由于过多DOM操作导致的性能问题，并介绍了事件委托作为优化手段。事件委托利用冒泡原理，在父元素上绑定事件处理子元素的触发，减少内存占用。作者指出，常见的错误做法是为每个子元素如li添加单独的点击事件，而正确做法是利用事件委托，简化代码并提高效率。在Vue中，可以通过修改v-for循环内的事件绑定来实现这一优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近老板总嫌弃网站做的太卡，看一看项目里面的代码，真是头皮发麻。由于代码的问题占用了过多的dom内存，能不卡吗，所以，这其实还是一个程序员编码的问题。比如在vue里面，我发现大家总不爱用事件委托。

事件委托是为了较少dom操作的内存占用，优化性能提出的一种方法。它通过在父元素上绑定事件，依靠冒泡捕获子元素触发的事件，进而处理。

它有以下的特点：

1、基于事件冒泡。

2、动态添加的节点也将自动加入绑定到委托事件中。

3、可以在页面的任何一个生命周期添加事件处理程序，而不用等待其余事件例如onload、onContentload的完成。

最常见的例子一个ul中由多个li组成，每次任意点击一个li，使其变成红色。如果给每一个li都加上一个点击事件，那成千上万个li呢？这无疑会造成内存空间的巨大浪费：

const liSymbol=Symbol();
let domObj=Object.create();
donmObj.defineProperty(domObj,liSymbol,document.getElementByTagName("ul li"));
domobj[liSymbol].forEach((item,index)=>{
    item.onclick=function(){
        item.style.color="red";
    }
})

这种写法显然不适合采用。

利用事件委托可以解决这个问题：

const ulSymbol=Symbol();
let domObj=Object.create();
donmObj.defineProperty(d

事件委托在vue上的实现