大量的事件处理函数会影响性能:
事件处理函数本质上是一种函数,是一种对象,存放在内存中,设置大量的事件处理函数会使内存中的对象变多,影响程序的性能和用户体验,所以为了更好的利益事件处理函数,可以巧用事件委托来提升性能
什么是事件委托
如果想要给若干个子节点绑定相同的事件(比如click),可以把事件统一绑定到父节点上,在父节点上统一处理从子节点冒泡上来的事件,这种技术叫做事件委托
Vue中如何实现事件委托呢?
使用场景:后台管理项目中常见的列表项有一列操作按钮,我们通常是v-for列表渲染按钮并且注册点击事件,此时若有100个按钮,则注册了100个事件 其实是不优雅的,此时可以巧用事件委托来实现
首先要搞清 e.target和e.currentTarget的区别:
e.target指向触发事件监听的对象。(在事件委托中 需要通过e.target拿到真正触发事件的元素 而不是绑定事件的父元素)
e.currentTarget指向添加监听事件的对象.(在事件委托中,指向的是绑定了事件处理函数的父元素)
然后就可以对我们的代码进行改造
<template>
<div>
//事件处理函数绑定到父节点el-table上进行统一处理
<el-table @click="handleClick">
<el-table-column prop="id" label="序号"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="edit" label="操作">
<template slot-scope="{ row }">
//将id绑定到data-id
<el-button type="primary" :data-id="row.id" title="edit"
>修改</el-button
>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
data() {
return {}
},
methods: {
handleClick(e) {
//通过e.target 判断触发元素是否是edit按钮 拿到唯一的id
if(e.target.title === 'edit'){
console.log(e.target.dataset.id);
}
}
}
}
</script>
如果这篇文章对你有帮助,请动动您宝贵的小手指点个赞吧
前端虐我千百遍,我待前端如初恋
