Vue toDoList binding event performance optimization event delegation

When using Vue to develop dynamic lists or forms, we often need to bind events for each list item or form element, such as click events, mouse move in and out events, and so on. However, if you use the general method to implement these event bindings, it will consume more performance, because each element needs to be bound to an event once. When the number of elements increases, the number of event bindings will increase accordingly, resulting in slower page response.

In order to optimize performance, we can use event delegation to implement event binding for dynamic lists or forms. The so-called event delegation is to let the parent element delegate the event processing of the child element. The specific method is to bind an event listener to the parent element. When the event is triggered, determine what operation to perform by judging whether the event source is a child element.

In Vue, you can implement event delegation by binding an event listener on the parent element and using the target property of the event object to determine whether the event source is a child element. For example, to use event delegation to bind the click event in a dynamic list, you can use the following code:

1. Using the general method to realize the event binding of the dynamic list toDoList will consume more performance:

<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. The performance of event delegation will be improved:

<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>

In the above code, we bind a click event listener to the ul element, and use the target property of the event object in the event handler to determine whether the event is triggered by the li element, and obtain the position of the li element in the parent element ( That is, the index of the list item), and finally obtain the corresponding list item data according to the index for processing.

By using event delegation to realize event binding of dynamic lists or forms, the number of event bindings can be greatly reduced, and the page response speed can be improved. It is also a common way of optimizing performance in Vue development.

Vue toDoList binding event performance optimization event delegation

Guess you like