v-for元素绑定事件代理转载

原创
小哥 3年前 (2022-10-17) 阅读数 55 #大杂烩

题目:

vue 在 v-for 将事件绑定到每个元素时,是否需要使用事件代理?为什么?

解析:

事件代理角色主要是事件代理角色,事件代理角色主要是事件代理角色 2 个

  1. 将事件处理程序代理到父节点以减少内存占用
  2. 动态生成子节点时自动将事件处理程序绑定到父节点

我在这里生成了100,000在这里生成了100,000在这里生成了100,000在这里生成了100,000 span 节点,通过节点,按节点,通过节点,通过 performance monitor 要监视内存使用情况和事件侦听器的数量,请比较以下内容 3 种情况

1不使用事件代理,每个不使用事件代理,每个 span 节点绑定到一个节点 click 事件并指向相同的事件处理程序

{{item}}

2不使用事件代理,每个不使用事件代理,每个 span 节点绑定到一个节点 click 事件并指向不同的事件处理程序

{{item}}

3,使用事件代理,使用事件代理

<div @click="handleClick"> <span v-for="(item,index) of 100000"
:key="index"> {{item}}

您可以看到,在监听程序数量和内存使用方面,使用事件代理的开销都低于前两种

同时对比 3 每个图表中的听众数量和我以前阅读中的听众数量 vue 进程源代码没有发现,进程源代码没有透露,进程源代码没有透露 vue 会自动做事件代理。将自动执行事件代理,该事件代理将自动执行
一般给予,但一般给予 v-for 绑定事件时,两者都使节点指向相同的事件处理程序(第二种情况可以运行,但 eslint 将发出警告),遗嘱发出警告)。(将警告),(将警告)。

在某种程度上,这比将不同的事件处理程序绑定到每个生成的节点要好一些,但侦听器的数量保持不变,因此使用事件代理稍好一些。

转载于:https://www.cnblogs.com/anbozhu7/p/11304144.html

版权声明

所有资源都来源于爬虫采集,如有侵权请联系我们,我们将立即删除

热门
最新文章
标签列表