prefacio
Esta es la última serie de artículos sobre el objeto reactivo que no "responde" después de una operación específica.
El registro principal es el mecanismo de implementación relacionado de vue
Jaja Para entender este artículo, necesitas los conceptos básicos del uso de vue y js
caso de prueba
El caso de uso es el siguiente, aquí nos enfocamos en el proceso de procesamiento de eventos
depuración de problemas
El procesamiento de todo el evento es dom -> ElButton -> VueComponent.emit -> HelloWorld.handleClick
Desde un punto de vista orientado a objetos, ElButton.handleClick es un método de plantilla, parte del cual se fija para el procesamiento comercial del componente en sí, y parte del cual se deja para el lugar donde se usa la instancia para el procesamiento.
ElButton se hace cargo de todo el negocio después de hacer clic. Hará algunos negocios que deben procesarse después de hacer clic en ElButton, y luego emitirá un evento de clic. El procesamiento de este evento se deja a la instancia de componente específica para prestar atención [como HelloWorld El botón el en es una instancia de componente]
Aquí miramos hacia arriba desde las bases dom
El evento vinculante real en el dom está vinculado aquí, lo que encapsula una capa de función
El controlador entrante llamado aquí es un invocador, y el invocador corresponde al evento vinculado por el controlador del botón el
Aquí está la conversión de dom -> ElButton arriba
La función pasada es, aquí está la conversión de ElButton -> VueComponent.emit arriba
Binding dom events Aquí, al crear elementos dom, hay una serie de ganchos llamados al crear
Aquí updateDOMListeners actualiza todos los controladores de eventos dom de acuerdo con el VNode actual
Aquí hay una capa de empaquetado createFnInvoker, por lo que la función de devolución de llamada es invocador, y luego el invocador llama a handleClick
Luego, la conversión del controlador de eventos de VueComponent al controlador de eventos de VNode está en la función de representación correspondiente al componente.
Esta parte está relacionada con el procesamiento de eventos de Vue.
Obtenga la lista de devolución de llamada correspondiente al clic de la tabla de procesamiento de eventos registrados y luego llámelos a su vez
La función correspondiente a vm._events['click'] aquí es HelloWorld.handleClick después de envolver una capa de invocador
Aquí está la conversión de VueComponent.emit -> HelloWorld.handleClick arriba
Entonces la inicialización de la instancia de VueComponent correspondiente a este ElButton es la siguiente, y el lugar de initEvents registrará eventos relacionados
Registre el oyente al inicializar los componentes de Vue
Esto se puede visualizar en los _events del objeto VueComponent, donde se registra la gestión de eventos de VueComponent
encima