共计 1267 个字符，预计需要花费 4 分钟才能阅读完成。
论断：
只有在十分多的节点中（v-for 渲染数量至多超过 1 千行），应用事件代理会进步一点性能，否则事件绑定在每个节点中简直没有差异。
首先 vue 源码没有做事件代理
vue 论坛开发者回复：https://forum.vuejs.org/t/is-…
实例证实：https://blog.csdn.net/supming…
那事件代理次要有什么作用？
1、动静生成和销毁子节点时，无需被动的保护子节点事件。（保护子节点事件: addEventListener, removeEventListener）
2、用一个父节点代理多个子节点的事件处理程序，缩小内存开销，晋升整体性能。
从 vue 的角度登程
1、在应用 v -for 时，应用 v -on: 或者 @ 这种简略的语法就能给批量渲染的每个元素都绑定上事件；并且当组件销毁时，vue 也会主动帮咱们将所有的事件处理器都移除掉。所以事件代理的第 1 个作用 vue 曾经帮咱们做到了。
2、在 v -for 中，给元素绑定的都是雷同的事件。所以除非批量渲染极多元素，一般状况下能够间接在每个子元素上绑定事件。在 v -for 渲染数量不多的状况下和应用事件代理的性能差异微不足道，在这种状况下无需应用事件代理。
对于性能的区别：
生成十万个 span 节点，通过 devTools 中的 performance monitor 来监控内存占用率和事件监听器的数量，比照以下 3 种状况：
1、不应用事件代理，每个 span 节点绑定一个 click 事件，并指向同一个事件处理程序
<div>
<span
v-for=”(item, index) of 100000″
:key=”index”
@click=”handleClick”
>
{{item}}
</span>
</div>
2、不应用事件代理，每个 span 节点绑定一个 click 事件，并指向不同的事件处理程序
<div>
<span
v-for=”(item, index) of 100000″
:key=”index”
@click=”function () {}”
>
{{item}}
</span>
</div>
3、应用事件代理
<div @click=”handleClick”>
<span
v-for=”(item, index) of 100000″
:key=”index”
>
{{item}}
</span>
</div>
能够看到第三张图内应用事件代理的状况下，监听器数量和内存占用率都比前两种形式要少。
同时对比 3 个图中监听器的数量以及我以往浏览 vue 源码的过程中，并没有发现 vue 会主动做事件代理，然而个别给 v-for 绑定事件时，都会让节点指向同一个事件处理程序（下面第二种状况能够运行，然而 eslint 会正告），肯定水平上比每生成一个节点都绑定一个不同的事件处理程序性能好，然而监听器的数量仍不会变，所以应用事件代理会更好一点。（事件代理的形式只用了一个监听器，而间接绑定的形式应用了 10 万个监听器）
下面批量渲染的例子和图来自：
https://github.com/Advanced-F…