前端 - Vue列表 — 事件委托 - 岁月是把杀猪刀

前言

作为疯狂的操纵dom转到vue这样通过数据驱动的程序员来说，姿势的转换也自然产生了很多疑问。
比如，事件委托。
包括我看现在公司的前端代码，发现所有列表的绑定形式都是：

<ul>
    <li v-for="(item, index) in data" @click="handleClick(index)">
        Click Me
    </li>
</ul>

然后这样的话，结果就是所有的li元素都绑定了事件。

比如下图就是一个失败案例

我们都知道，过多的事件对于性能来说是很糟糕的，尤其在移动端，可以说是无法容忍。

解决方案

直接上代码：

<body>
  <div id="app">
    <my-component></my-component>
  </div>
  
  <script src="./vue.js"></script>
  <script>
    let component = {
      template: `
        <ul @click="handleClick">
          <li v-for="(item, index) in data" :data-index="index">
            {{ item.text }}
          </li>
        </ul>
      `,
      data() {
        return {
          data: [
            {
              id: 0,
              text: '0',
            },
            {
              id: 1,
              text: '1',
            },
            {
              id: 2,
              text: '2',
            }
          ]
        }
      },
      methods: {
        handleClick(e) {
          // 多谢 `@微醺岁月` 提醒，要过滤掉ul，不然会出问题
          if (e.target.nodeName.toLowerCase() === 'li') {
            const index = parseInt(e.target.dataset.index)
            // 获得引索后，只需要修改data数据就能改变UI了
            this.doSomething(index)
          }
        },
        doSomething(index) {
          // do what you want
          alert(index)
        }
      }
    }

    new Vue({
      el: '#app',
      components: {
        'my-component': component
      }
    })
  </script>
</body>

通过在li元素中额外加一个data-index就可以实现委托啦~

最后，让我们再看一下结果：

Vue列表 — 事件委托

前言

解决方案

岁月是把杀猪刀

引用和评论

workspaces - monorepo实战

网页设计的垂直居中

CSS团队协作规范

100个React最佳实践小技巧

前端开发工具

开发插件集合

Javascript(turfjs)等值线图绘制