react和vue中给列表绑定事件性能问题

Question

在vue中我们会使用

<ul>
    <li v-for="xxxxx" @click="fn"></li>
</ul>

这样去给每一个li绑定事件，如果li很多的话。那不会对性能有影响吗？
为什么这里不是给ul绑定一个事件，然后通过event事件对象改写成事件委托？
可是实际情况是大家好像都是在li里绑定的事件。。

对react中的事件绑定也有同样的疑问。

Answer 1

不管是 vue 还是 react 本身内部都做了事件代理了

Vue的话，每一个实例都维护一个_events对象来存放所有事件，$on,$emit方法负责监听和触发里面的事件。

Vue 内部没有做事件代理。循环绑定时绑定的是同一回调函数，组件销毁时 Vue 会自动自动解绑相应事件，数据小其实还好。
但如果绑定的数据量超大，确实可能会存在问题。

React的话，绑定事件在JSX（虚拟DOM）上，实际渲染会把事件全部绑定在render的根节点上，和事件委托本质其实一样。

Answer 2

框架已经做好了事件代理，事件并不会绑定到真实的 DOM 上

Answer 3

每个li都绑定了同一个回调函数，并不是每个li单独的一个回调函数。