前言
从疯狂的操纵dom转到vue这样通过数据驱动的程序员来说，姿势的转换也自然产生了很多疑问。比如，事件委托。
包括我看现在公司的前端代码，发现所有列表的绑定形式都是：
<ul>
<li v-for="(item, index) in data" @click="handleClick(index)">
Click Me
</li>
</ul>
然后这样的话，结果就是所有的li元素都绑定了事件。
我们都知道，过多的事件对于性能来说是很糟糕的，尤其在移动端，可以说是无法容忍。
那么为了更好的解决这个性能问题，我们该怎么办呢？下面看看新的解决方案（事件代理，通过在li元素中额外加一个data-index就可以实现委托啦~）
<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>
网友评论