Se filtró el código fuente del front-end de Vue
En este número, los accesorios se utilizan en la configuración. Los componentes padre-hijo se comunican con los accesorios, emiten, etc. Por favor verifique 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, o puede acceder a esto. $el y así sucesivamente.
Debido a que está probando dom, jest necesita inyectar el siguiente contenido por adelantado, para que haya un nodo de aplicación en el documento. El siguiente caso de prueba es similar a definir un nodo de aplicación en HTML.
Los casos de prueba para esta característica han comenzado oficialmente.
El caso de prueba anterior
resuelve estos dos requisitos:
En vista del análisis anterior, es necesario 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, obtenga el contenido del objeto devuelto por la configuración desde this.xxx en render y luego procese el.
Al crear un vnode, debe vincular El en mountelement para determinar la clave actual del objeto proxy en setupStatefulComponent.
Parece que no hay problema, pero en realidad sí hay problema. Considere detenidamente si mountElement se ejecuta después de setupStatefulComponent. Al ejecutar setupStatefulComponent, vnode.el no existe. Cuando se ejecute mountelement más tarde, vnode tendrá un valor. Entonces el caso de prueba anterior debe ser incorrecto y $el es nulo.
La clave para resolver este problema es que el orden de carga de mountElement es render->patch->MountElement, y el subárbol devuelto por la función de renderizado es un vnode. Cuando se monta lo anterior en vnode, el ya ha sido asignado, por lo que la siguiente operación se realiza después del parche.
En vue, puedes usar onEvent para escribir eventos, entonces, ¿cómo se implementa esta función? vamos a ver.
En el caso de prueba de esta función, puede analizar el siguiente contenido:
Resolver el problema:
Esta función es relativamente simple. Al procesar la propiedad, juzgue si el atributo se ajusta al formato de /on [a-z]/i. Si está en este formato, el evento se registrará, pero vue3 almacenará en caché el evento. ¿Cómo hacer esto?
El almacenamiento en caché también es fácil de implementar. Agregar atributo el. _ vei || (El. _ vei = {}) a la entrada El actual, y se usará directamente. Si no existe, se creará y almacenará en la caché.
El manejo de eventos está bien.
La comunicación de componentes padre-hijo es muy común en Vue, principalmente implementando accesorios y emisiones.
Basado en el caso de prueba anterior, analice el siguiente contenido de los accesorios:
Resuelva el problema:
Problema 1: si desea utilizar accesorios en la función de configuración de un subcomponente Como primer parámetro, al llamar a la función de configuración, puede pasar los accesorios del componente actual a la función de configuración. Pregunta 2: Si se necesita una pregunta al representar, entonces en el delegado anterior, agregue un juicio. ¿Está la clave en los accesorios de la instancia actual? Pregunta 3: Modifica el error, es decir, solo se puede leer. Puede envolverlo usando la API superficial previamente implementada.
Una vez completado, podemos encontrar que nuestro caso de prueba se ejecuta sin problemas.
Los accesorios se implementaron arriba, por lo que emit es esencial, así que implementemos emit a continuación.
Basándonos en los casos de prueba anteriores, podemos analizar:
Solución: Problema 1: emit es el segundo parámetro de la configuración, y el segundo parámetro se puede pasar al llamar a la configuración. función. Pregunta 2: Con respecto al primer parámetro de emisión, puede hacer un juicio condicional, cambiar la forma de xxx-xxx a la forma de xxxXxx, luego agregarlo y finalmente encontrarlo en los accesorios. Si existe, se llamará. Si no existe, no se llamará al segundo parámetro de la pregunta 3: emit.
¡Esto es todo un éxito!