vue中巧用事件委托处理点击事件提升性能

大量的事件处理函数会影响性能:

事件处理函数本质上是一种函数,是一种对象,存放在内存中,设置大量的事件处理函数会使内存中的对象变多,影响程序的性能和用户体验,所以为了更好的利益事件处理函数,可以巧用事件委托来提升性能

什么是事件委托

如果想要给若干个子节点绑定相同的事件(比如click),可以把事件统一绑定到父节点上,在父节点上统一处理从子节点冒泡上来的事件,这种技术叫做事件委托

Vue中如何实现事件委托呢?

使用场景:后台管理项目中常见的列表项有一列操作按钮,我们通常是v-for列表渲染按钮并且注册点击事件,此时若有100个按钮,则注册了100个事件 其实是不优雅的,此时可以巧用事件委托来实现
首先要搞清 e.target和e.currentTarget的区别:

1. e.target指向触发事件监听的对象。(在事件委托中 需要通过e.target拿到真正触发事件的元素 而不是绑定事件的父元素)

2. 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>