Cuando usamos Vue para desarrollar listas o formularios dinámicos, a menudo necesitamos vincular eventos para cada elemento de la lista o elemento del formulario, como eventos de clic, eventos de entrada y salida del mouse, etc. Sin embargo, si utiliza el método general para implementar estos enlaces de eventos, consumirá más rendimiento, porque cada elemento debe vincularse a un evento una vez. Cuando aumenta el número de elementos, el número de enlaces de eventos aumentará en consecuencia, lo que resultará en respuesta de página más lenta.
Para optimizar el rendimiento, podemos utilizar la delegación de eventos para implementar el enlace de eventos para listas o formularios dinámicos. La llamada delegación de eventos consiste en permitir que el elemento principal delegue el procesamiento de eventos del elemento secundario. El método específico es vincular un detector de eventos al elemento principal. Cuando se activa el evento, determine qué operación realizar juzgando si la fuente del evento es un elemento secundario.
En Vue, puede implementar la delegación de eventos vinculando un detector de eventos en el elemento principal y utilizando la propiedad de destino del objeto de evento para determinar si el origen del evento es un elemento secundario. Por ejemplo, para utilizar la delegación de eventos para vincular el evento de clic en una lista dinámica, puede utilizar el siguiente código:
1. Usar el método general para realizar el enlace de eventos de la lista dinámica aDoList consumirá más rendimiento:
<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. Se mejorará el rendimiento de la delegación de eventos:
<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>En el código anterior, vinculamos un detector de eventos de clic al elemento ul y usamos la propiedad de destino del objeto de evento en el controlador de eventos para determinar si el evento es desencadenado por el elemento li y obtener la posición del elemento li en el elemento principal (es decir, el índice del elemento de la lista) y finalmente obtener los datos del elemento de la lista correspondiente de acuerdo con el índice para su procesamiento.
Al utilizar la delegación de eventos para realizar la vinculación de eventos de listas o formularios dinámicos, la cantidad de vinculaciones de eventos se puede reducir en gran medida y se puede mejorar la velocidad de respuesta de la página. También es una forma común de optimizar el rendimiento en el desarrollo de Vue.