Análisis del código fuente de Vue3: implementación de accesorios, emisión, procesamiento de eventos, etc.

gt;

En esta pregunta, la configuración usa accesorios y los componentes padre-hijo se comunican con los accesorios y emiten, etc. , ver todo el código fuente

En la función de renderizado, puede acceder al contenido devuelto por la configuración a través de esto. También puedes acceder a esto.$el etc

Dado que este es un dom de prueba, jest necesita inyectar lo siguiente por adelantado para que haya un nodo de aplicación dentro del documento, el caso de prueba a continuación es similar a ese. en html Definir un nodo de aplicación

El caso de prueba para esta función comienza oficialmente

El caso de prueba anterior.

Resuelva estos dos requisitos:

Para el análisis anterior, necesitamos crear un proxy en setupStatefulComponent y vincularlo a la instancia, y si el resultado de la ejecución de la configuración es un objeto, entonces Ya existe en la instancia y se puede obtener a través de instancia.setupState

A través de la operación anterior, puede obtener el contenido de this.xxx y luego procesarlo

Necesita crearlo en mountElement Vincule el a vnode cuando node y vincúlelo a la instancia de setupStatefulComponent en el objeto proxy para determinar la clave actual

Esto puede no parecer un problema, pero en realidad lo es. Piénselo detenidamente, mountElement no se ejecutará después de setupStatefulComponent, mountElement no se ejecutará después de setupStatefulComponent y mountElement no se ejecutará después de setupStatefulComponent. Al ejecutar setupStatefulComponent, vnode.el no existe, y cuando se ejecute mountelement más tarde, vnode tendrá un valor, por lo que el caso de prueba anterior definitivamente informará un error y $el estará vacío

Resuelva esto problema La clave está en mountElement. La clave para resolver este problema es que mountElement se carga en el orden de render -gt; patch -gt; mountElement, y el subárbol devuelto por la función de renderizado es un vnode, al que se le ha asignado $el cuando se cargó arriba, por lo que lo hará. estar en Realizar la operación después del parche

En vue, puedes usar onEvent para escribir eventos, entonces, ¿cómo se implementa esta función? Echemos un vistazo

En el caso de prueba de esta función. Puede analizarlo de la siguiente manera:

Resuelva el problema:

Esta función es relativamente simple. Al procesar accesorios, juzga si el atributo satisface /^on[A-Z]. /i.Formato, si es este formato, entonces se registra el evento, pero este no es el caso con vue. Si es así, el evento se registra, pero vue3 almacena en caché el evento, entonces, ¿cómo se hace?

El almacenamiento en caché también es fácil de implementar. Agregue un atributo el._vei || (el. _vei = {}) al valor pasado actualmente.

_vei = {}) Si existe aquí, úselo directamente. Si no existe, créelo y guárdelo en el caché.

El procesamiento de eventos está bien

Padre-hijo. La comunicación de componentes es muy común en vue. Aquí usamos principalmente emit para implementar accesorios.

Según el caso de prueba anterior, analice el siguiente contenido de los accesorios:

Resuelva el problema:

Pregunta 1: Si desea Si los accesorios se utilizan como primer parámetro en la función de configuración del subcomponente, cuando se llama a la función de configuración, los accesorios del componente actual se pasan a la función de configuración . Pregunta 2: Si tiene un problema con la representación aquí, agregue un juicio sobre el proxy. La clave son los accesorios en la instancia actual. Pregunta 3: Modifique el error, es decir, solo lectura. api superficialReadonly para encapsular ambos

Después de hacer esto, puede encontrar que su caso de prueba se ejecuta sin problemas

Si los accesorios se implementan anteriormente, entonces la emisión es inevitable, así que implemente. emit

Según el caso de prueba anterior, puede analizar:

Solución: Problema 1: emit es el segundo parámetro de la configuración, por lo que el problema del segundo parámetro se puede pasar al llamar la función de configuración 2: con respecto al primer parámetro de emisión, puede realizar un juicio condicional y convertir la forma de xxx-xxx en xxxXxx. Pregunta 2: Para el primer parámetro de emisión, puede realizar un juicio condicional, convertir la forma de xxx-xxx a xxxXxx, luego agregarlo y finalmente encontrarlo en los accesorios y llamarlo si existe o no. 3: Para el segundo parámetro de emit, solo usa los parámetros restantes

¡Eso es un éxito total!