Cómo operar el orden de carga de Vue
En la versión 1.0 de Vuejs, si los componentes primarios y secundarios se usan juntos, la ejecución de su ciclo de vida tiene las siguientes características:
1. Creado siempre se crea primero, luego el secundario
La función de ciclo de vida creada siempre se ejecuta en el orden de padre a hijo, pero los hermanos no siguen estrictamente este orden. Se estima que utilizan funciones asincrónicas. No solo eso, el orden de inserción del hijo. Los componentes del componente principal también son aleatorios, sin un patrón específico. Supongamos que el orden de referencia de los componentes secundarios es el siguiente:
Si utiliza la referencia $children para obtenga todos los componentes secundarios. Entonces "child-c1" no siempre está en la primera posición, como se muestra a continuación:
// El juicio fallará en la mayoría de los casos
if(this. $children[0 ] === this.$refs.child1) {
// // Es posible que el código aquí no tenga oportunidad de ejecutarse
}
2. Secuencia lista Aún más confuso
Según mi estimación, el orden de preparación de los componentes padre-hijo debe ser primero el componente hijo y luego el componente padre, para garantizar que los componentes estén completamente cargados. Sin embargo, a juzgar por ejemplos reales, no hay ningún orden en la preparación de los componentes principales y, a veces, los componentes secundarios se cargan primero, por lo que en la práctica de programación nunca se debe confiar en su orden de carga.
3. Conclusión
En la práctica, si necesita asegurarse de que los componentes se carguen en orden, nunca debe confiar en el orden de su ciclo de vida ni en la preparación de la vida útil de los componentes padre e hijo. ciclo.
Cómo determinar que todos los subcomponentes han completado la carga
En el caso de componentes padre-hijo, especialmente cuando la información de configuración está separada de la información comercial, generalmente necesitamos completar la carga de todos los subcomponentes, luego ejecute los servicios relacionados del componente principal, tomando la siguiente estructura de componentes como ejemplo:
En el ejemplo anterior, necesitamos combinar la información de configuración de los subcomponentes, por lo que la configuración combinada La información será precisa y completa sólo cuando todos los subcomponentes estén cargados.
Por lo tanto, si utilizamos el evento cargado directamente (el evento listo en 1.0), es probable que obtengamos resultados incorrectos.
Para resolver este problema, también podríamos utilizar las siguientes estructuras y métodos de datos:
props: {
colSize: {
type: Number,
predeterminado: 1
}
}
datos () {
retorno {
/ / Se utiliza para obtener toda la información de configuración del subcomponente
colModel: [],
readySize: 0
}
},
métodos: {
/**
* Llamado por el componente secundario cuando se completa la carga
*/
addColModel () {
p>this.readySize ++
// Comprobar si el progreso es el mismo que el conjunto colSize
if(this. readySize == this.colSize) {
// Todos los subcomponentes se han cargado en este momento
}
}
}
Al configurar el elemento de configuración "colSize" y al verificar el método "addColModel" llamado por el subcomponente, podemos determinar el momento en que todos los subcomponentes han completado la carga (el componente principal puede haber completado la carga en este momento, puede que no haya completado la carga), organizando así la información de configuración necesaria.
Pero en aplicaciones reales, descubrimos que si la cantidad de subcomponentes es grande, ocurrirá otro fenómeno: el orden de carga de los subcomponentes aparecerá aleatoriamente. es consistente con el orden de configuración. Podemos agregar un atributo de "orden" al subcomponente como se muestra a continuación. El contenido de configuración más reciente es el siguiente:
Después de eso, podemos ordenar todos los componentes secundarios después de cargarlos, de la siguiente manera:
// Dado que Vue no puede determinar el orden en el que se cargan los elementos secundarios, debes especificar manualmente el orden
this.colModel.sort((a,b)=>a.order-b .order) Creo que después de leer los casos de este artículo, domina este método. Para obtener más información interesante, preste atención a otros artículos relacionados en Gxl.com.
Lectura recomendada:
JS Obtenga el caso detallado de la ubicación geográfica actual
Parabola.js Parabola.js utiliza la función agregar al carrito de compras para implementar la parábola