前言
作为疯狂的操纵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就可以实现委托啦~
最后，让我们再看一下结果：
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。