博客

在使用 Vue 开发动态列表或表单时，我们常常需要为每个列表项或表单元素绑定事件，比如点击事件、鼠标移入移出事件等。而如果使用一般方法实现这些事件绑定，会比较消耗性能，因为每个元素都需要绑定一次事件，当元素数量增多时，事件绑定的数量也会相应增多，导致页面响应变慢。

为了优化性能，我们可以采用事件委托的方式来实现动态列表或表单的事件绑定。所谓事件委托，就是让父元素代理子元素的事件处理。具体做法是在父元素上绑定一个事件监听器，当事件触发时，通过判断事件源是否为子元素来确定执行何种操作。

在 Vue 中，可以通过在父元素上绑定事件监听器，并利用事件对象的 target 属性来判断事件源是否为子元素来实现事件委托。例如，在动态列表中使用事件委托来绑定点击事件，可以采用以下代码：

1.采用一般方法实现动态列表toDoList的事件绑定会比较消耗性能：

<template>
    <ul id="chat-box">
        <li v-for="(item, index) in messageList" :key="index" @click="onClick(item)">
            {{item}}
        </li>
    </ul>
</template>

<script>
    export default {
        components: {},
        data() {
            return {
                messageList:[1, 2, 3]
            }
        },
        methods: {
            onClick(item) {
                //对数据进行处理
                console.log(item)
            }
        }
    }
</script>

2.采用事件委托的方式性能会有所提升：

<template>
    <ul id="chat-box" @click="(e) => onClick(e)">
        <li v-for="(item, index) in messageList" :key="index">
            {{item}}
        </li>
    </ul>
</template>

<script>
    export default {
        components: {},
        data() {
            return {
                messageList:[1, 2, 3]
            }
        },
        methods: {
            onClick(e) {
                const target = e.target;
                if(target && target.nodeName === 'LI'){
                    const index = Array.from(target.parentNode.children).indexOf(target);
                    let item = this.messageList[index];
                    //对数据进行处理
                    console.log(item)
                }
            }
        }
    }
</script>

上述代码中，我们在 ul 元素上绑定了一个 click 事件监听器，在事件处理函数中通过事件对象的 target 属性来判断是否为 li 元素触发的事件，并获取 li 元素在父元素中的位置（即列表项的索引），最后根据索引来获取对应的列表项数据进行处理。

通过采用事件委托的方式来实现动态列表或表单的事件绑定，可以大幅度减少事件绑定的数量，提高页面响应速度，同时也是 Vue 开发中的一种优化性能的常见思路。