美文网首页Web 前端开发 前端Vue专辑
vue:巧用事件委托提升性能

vue:巧用事件委托提升性能

作者: 三金敢心 | 来源:发表于2020-03-12 11:15 被阅读0次

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

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

    什么是事件委托

    如果想要给若干个子节点绑定相同的事件(比如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>
    

    如果这篇文章对你有帮助,请动动您宝贵的小手指点个赞吧
    前端虐我千百遍,我待前端如初恋

    相关文章

      网友评论

        本文标题:vue:巧用事件委托提升性能

        本文链接:https://www.haomeiwen.com/subject/qlmyjhtx.html