¿Qué hacer cuando los eventos de arrastre en las páginas de deslizamiento hacia la izquierda y hacia la derecha de la aplicación Vue interfieren entre sí? El método específico para vincular eventos a elementos DOM en Vue es vincular eventos a elementos DOM mediante la directiva v-on o la sintaxis de eventos sugar @ en la sección de métodos y controladores de eventos del artículo. Vue analizará la plantilla del componente y luego vinculará los eventos al elemento DOM al vincular la actualización a la directiva v-on (por supuesto, si el elemento es un iframe, esperará hasta que el iframe haya terminado de cargarse antes de vincularle los eventos). . Vue utiliza el manejo de eventos de nivel DOM2 para vincular eventos a elementos DOM porque Vue sirve a navegadores modernos superiores a IE9 y todos admiten eventos de nivel DOM2. Por lo tanto, el siguiente ejemplo es efectivamente equivalente a el.addEventListener('click',func), por lo que addEventListener admite eventos vinculantes, al igual que la directiva v-on. Del mismo modo, es teóricamente posible desvincular eventos, pero si bien existe una API para esto, la documentación de Vue no nos muestra cómo hacerlo. Como puede ver en el código, cada directiva v-on tiene un método de reinicio, que es una operación de desvinculación. Cuando el método vinculado a la directiva cambia, podemos usar este método para volver a vincularlo antes del evento. Por lo tanto, si necesitamos desvincular un evento, podemos recorrer vm._directives, encontrar la directiva correspondiente y desvincularla. Por supuesto, dado que estamos usando procesamiento de eventos de nivel DOM2, también puede usar removeEventListener para desvincular directamente el evento; consulte esta demostración. Después de la operación de desvinculación, btn1 se desvincula, pero btn2 no se desvincula correctamente, es decir, el modificador de la directiva v-on; consulte el manejo de controladores con modificadores en el código fuente. Como sugiere el nombre, el modificador modifica lo que hace el método de procesamiento de Vue: encapsular el controlador original en un nuevo controlador para vincular elementos DOM. Por supuesto, la desvinculación o desvinculación del método original fallará. Por supuesto, esto es solo un análisis de los principios de vinculación de eventos de Vue. En la mayoría de los casos, no necesitamos desvincular eventos. El uso adecuado de la delegación de eventos puede resolver la mayoría de los problemas de rendimiento causados ​​por la vinculación de eventos. Eventos personalizados Los eventos personalizados de Vue están diseñados para la comunicación entre componentes. Los eventos personalizados proporcionan varias API: $on, $off, $once, $emit, $broadcast y $dispatch, que son muy concisas. Primero, hay dos variables privadas de vm, vm._events y vm._eventCount. Todos los eventos personalizados de cada instancia de vm se almacenarán en vm._eventsCount, que almacena la subrutina que activa el controlador de eventos personalizado después de ejecutar la transmisión del evento. La cantidad de componentes, esta es la optimización de la transmisión de eventos. Si la transmisión de eventos no está optimizada, el controlador de eventos no activará el controlador de eventos personalizado. vm._eventsCount[events] es cero. Cuando se transmite un evento, se puede concluir que el subcomponente no tiene un detector para el evento, por lo que no es necesario capturar el detector de eventos en la capa del subcomponente. $on registra un evento personalizado. Registrar el evento es muy simple. Primero, móntelo en la instancia vm._events[event]=fn y luego propague hacia arriba para actualizar _eventsCount de cada componente. Tenga en cuenta que podemos registrar enlaces del ciclo de vida a través de $on, pero el ciclo de vida no puede difundirse ni difundirse, por lo que debemos actualizar el eventsCount de cada componente. Por lo tanto, necesitamos filtrar el recuento de eventos antes de actualizarlo. Marque modificarListenerCount $once, porque el evento registrado por $once es un evento único y se descargará después de la ejecución, por lo que, de hecho, la función $once llama a $on para registrar el evento y está encapsulado. Si $off comprende el proceso de registrar eventos (en realidad cambia _events y _eventsCount), entonces descargar eventos será obvio.

Sin embargo, $off admite tres métodos de desinstalación: 1. Si no hay parámetros, elimine todos los detectores de eventos que atraviesan _events, actualice el _eventsCount de cada evento mediante difusión y borre vm._events. 2. Si solo se proporcionan eventos, elimine. todos los oyentes del evento, actualización de burbuja _eventsCount para cada evento, vm.events excluye este evento 3. Si se proporcionan tanto un evento como una devolución de llamada, solo el controlador de eventos para esta devolución de llamada se elimina de vm._events[events]. Si este controlador de eventos es el mismo que la devolución de llamada, este controlador de eventos se excluye de vm._events[events]. y usó El _eventsCount $$emit del evento de actualización de burbuja activa el evento iterando directamente a través de cada controlador de eventos de vm._events[event] y ejecutándolo. $emit devuelve shouldPropagate, que es un valor booleano que depende de la presencia de un detector de eventos en la cadena principal y del valor devuelto por el controlador de eventos. Determina si $dispatch deja de burbujear. El evento se activa primero en la instancia y la propagación burbujeante se detendrá de forma predeterminada, pero si $emit devuelve mustPropagate con un valor verdadero, el evento continuará propagándose hacia la cadena principal, es decir, el evento continuará distribuyéndose. en la cadena principal del componente principal. transmisión del evento de transmisión. La profundidad primero atraviesa los subcomponentes y ejecuta el controlador de eventos de escucha de cada subcomponente. Al vincular y descargar eventos personalizados, cada componente mantendrá un vm._eventsCount, que se utiliza para dar indicaciones durante el recorrido en profundidad, para evitar un recorrido en profundidad innecesario. Podemos utilizar eventos personalizados para la comunicación de componentes propagándolos entre componentes. La comunicación de componentes es un tema espinoso en el proceso de desarrollo de aplicaciones, porque está directamente relacionado con la solidez y la capacidad de mantenimiento de toda la aplicación. Se recomienda introducir vuex al desarrollar proyectos grandes. Desde la perspectiva de la arquitectura de la aplicación, la comunicación de componentes es más fácil. mantener que los eventos. Por ejemplo, varios componentes secundarios tienen que enviar eventos para comunicarse con el componente principal. Si los componentes secundarios no prestan atención a la convención de nomenclatura al enviar eventos y el componente principal tiene nombres repetidos, entonces el componente principal lo hará. envíe el evento nuevamente y luego el componente principal enviará eventos. El componente luego envía eventos para comunicarse con el componente principal. Si el componente secundario no presta atención a la convención de nomenclatura y cambia el nombre del evento repetidamente, entonces el oyente del componente principal no sabrá desde dónde se envía el evento ni cómo manejarlo, lo que también es uno de los peligros ocultos. Si se adopta este método de comunicación de componentes, los subcomponentes enviarán una gran cantidad de eventos y el componente principal deberá mantener una gran cantidad de detectores de eventos. Si lleva mucho tiempo, será fácil olvidar la correspondencia. entre los oyentes y los subcomponentes que envían eventos. Esto a su vez aumenta los costos de desarrollo y mantenimiento. El costo de mantenimiento de un componente lleno de despacho de eventos también puede dejar huecos fácilmente. Además, los componentes padre e hijo pueden comunicarse a través de eventos, pero la comunicación entre componentes hermanos requiere muchos costos de desarrollo adicionales. Los eventos personalizados de componentes han analizado los eventos de enlace de elementos DOM anteriormente. Usamos esto como ejemplo, pero a veces habrá v-on para los eventos de enlace de componentes si no se analizan anteriormente, aquí hay dos diferencias obvias. eventos personalizados de elementos, por lo que obviamente addEventListener no se aplica y la implementación de Vue es la misma, por lo que no es un problema. Vue hace algo completamente diferente al primer ejemplo, registrarComponentEvents. El resultado del enlace de instrucciones v-on es demoVm._ahref="/appdz/"title="Events[myfunc]=[func] y update_eventsCount de la empresa de producción y desarrollo de aplicaciones de Chengdu. Mire esta demostración, puede ver v-on Las directivas pueden vincular eventos a elementos y componentes DOM. Ahora que comprende esto, la razón para usar la directiva v-on es clara.