「这是我参与2022首次更文挑战的第2天，活动详情查看：2022首次更文挑战」
写在前面
vue的性能优化一直是咱们面试常问的面试题.
相信大家也都背过那些什么各种网络优化,减少回流重绘,减小包的体积之类的优化...
记得之前面试的时候,面试官问我性能优化的问题,我除了背了上面说的那些.
我还鬼使神差的说了一句:"事件代理" .
这时候,面试官眼前一亮,问我:"你们还用原生JS么?"
我说:"不用".
面试官:"那你怎么用事件代理?"
我:'.....我,我只是知道'(空气突然安静了)
可想而知,那场面试没过.
直到后来,我才知道,vue真的有事件代理.
原理和原生JS的e.target的原理类似.同样也可以减少数据绑定.
当循环的数据过多的时候,事件代理,确实是一个很好的选择.
以往的事件绑定
我们知道,以往的事件绑定 ,是在v-for的时候,进行一个事件的绑定.然后传参index去进行操作
然后在onClick的点击事件中, 根据index做判断进行操作
这时候,如果数据量少的话还好,但是如果数据量过多的话,就需要在每一个div元素上进行一个事件绑定.
这时候,性能上,也是一种浪费.
因此,我们就需要用js的事件委托的思路,在父级的div上进行绑定.
但是我们知道,父级的div的click事件上我们是无法获取到字元素的index.
那么问题就来了!!!!如何让父级知道选中的是哪一个子元素呢????
全新的事件代理
这时候,我们就可以用上了H5的 :自定义属性的操作
然后在父元素上,协商一个绑定事件,不传参数
接着我们在点击事件里,写上一个e,我们来打印一些e.target,看看是什么...
可以发现,e.target 打印出来就是我们的点击子元素的每一项
然后,我们可以通过方法来获取当中的每一项,那么,用什么方法呢????
然后,我们看一下打印的是什么
可以发现,打印出来的东西,就是我们点击出来的index.
但是,要注意,这里的字符串,我们是字符串的格式,所以,我们要转成字符串的格式,
可以用Number()或者parseInt()转成数字就可以
总结
以上的方法,就可以很好的实现咱们vue项目中的事件代理.下一次,学到的小伙伴,就可以在开发中尝试着去用一下,真的是屡试不爽...
