Vue.js 性能要点:事件委托
Vue、React 这些框架的出现为前端开发带来了很大的便捷,但是享受这些便捷的同时我们不应忘记之前我们掌握的优化方法。
在 Vue 中为列表中每一元素绑定事件非常方便,@eventName="handler"
即可,但是方便的同时带来了性能上的不友好。
如下我们采用两种方式监听 .list .item
的 click
事件。
绑定事件到每一个 .item
:
<template>
<div id="app">
<div class="list">
<div class="item"
@click="onClickItem"
v-for="(item, idx) in list"
:key="idx">{{ idx }}</div>
</div>
</div>
</template>
<script>
const getInitialData = () => ({
list: new Array(100),
});
export default {
data: getInitialData,
name: 'App',
methods: {
onClickItem() {
alert('click');
},
},
};
</script>
绑定事件到 .list
:
<template>
<div id="app">
<div class="list" @click="onClickList($event)">
<div class="item"
v-for="(item, idx) in list"
:key="idx">{{ idx }}</div>
</div>
</div>
</template>
<script>
const getInitialData = () => ({
list: new Array(100),
});
export default {
data: getInitialData,
name: 'App',
methods: {
onClickList(event) {
const target = event.target;
if (target.className === 'item') {
alert('click');
}
},
},
};
</script>
以下分别是两种方式的内存快照:
可以看出使用事件委托少了 EventListener
对象。随着 .item
元素的增多,绑定事件到 .item
会使内存消耗呈线性增长。