前言
從瘋狂的操縱dom轉(zhuǎn)到vue這樣通過數(shù)據(jù)驅(qū)動(dòng)的程序員來說，姿勢的轉(zhuǎn)換也自然產(chǎn)生了很多疑問撞反。比如妥色，事件委托。
包括我看現(xiàn)在公司的前端代碼遏片，發(fā)現(xiàn)所有列表的綁定形式都是：
<ul>
<li v-for="(item, index) in data" @click="handleClick(index)">
Click Me
</li>
</ul>
然后這樣的話嘹害，結(jié)果就是所有的li元素都綁定了事件撮竿。
我們都知道，過多的事件對于性能來說是很糟糕的笔呀，尤其在移動(dòng)端幢踏，可以說是無法容忍。
那么為了更好的解決這個(gè)性能問題凿可，我們該怎么辦呢惑折？下面看看新的解決方案（事件代理，通過在li元素中額外加一個(gè)data-index就可以實(shí)現(xiàn)委托啦~）
<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枯跑，不然會(huì)出問題
if (e.target.nodeName.toLowerCase() === 'li') {
const index = parseInt(e.target.dataset.index)
// 獲得引索后惨驶，只需要修改data數(shù)據(jù)就能改變UI了
this.doSomething(index)
}
},
doSomething(index) {
// do what you want
alert(index)
}
}
}
new Vue({
el: '#app',
components: {
'my-component': component
}
})
</script>
</body>
