vue comprender el ciclo de vida

ciclo de vida

Cada instancia de un componente y experimentará un ciclo de vida completo, dividido en tres fases
1. Inicialización Escenario
2 operación (montaje de datos)
3. destrucción
durante el ciclo de vida de
1 y una instancia de componente, por nueva Vue () para crear , iniciar el ciclo de vida.
2. Después de instancias, la función de enganche beforeCreate se ejecutará inmediatamente, sin la carga de datos en este momento, entonces la función que no puede adquieren los datos mientras que no hay verdadera nodos DOM que cuelgan hacia fuera en NULL.
3. Monte Data ( Nota: sin montar nodo DOM ) y después de eventos de unión, realiza creó función de enlace , cuando los datos se ha completado el montaje, donde se puede obtener los datos y los datos de cambio. Pero en este caso no va a desencadenar una nueva función de enlace. Se puede utilizar para hacer peticiones ajax y enlaces de eventos .
4. Después de completar la función de enlace creado, comenzó a buscar los componentes y ejemplos de cada plantilla, que sea compilada en DOM virtual, puesto función rander para inicializar la representación , función de enlace beforeMount en DOM virtual ha sido creado a partir de, pero los datos no se ha rendido, aquí no te desencadenar una nueva función de enlace se puede utilizar para las solicitudes marca y enlaces de eventos.
5. En función de rander representación real de la DOM , se inició funciones montado , donde los datos ya está montado bueno, nodo DOM también prestado, usted puede hacer algunos ejemplos de cosas relacionadas.
6. EnCuando los componentes de datos y los casos de cambios , se ejecutará inmediatamente función AntesDeActualizar , y luego volver a crear un virtual DOM DOM con el método virtual de edad con diff contraste, y luego volver a hacer.
7. Cuando se complete la actualización, la aplicación de la función de actualización , este tiempo los datos, actualizaciones DOM están completos, se puede. Nueva DOM
8. Cuando se llama a $ destruir método a través de algunos medios para la aplicación inmediata de la función de enlace beforeDestroy , esta vez también ejemplos no destruida.

9. Después se ejecutará el ejemplo de la destrucción de la función de enlace inmediatamente destruido , todo se des-unión indicación en este momento ejemplo Vue, se eliminarán todos los detectores de eventos, todos ejemplo el niño será destruido. Durante la representación en el lado del servidor del gancho no se llama, dejando sólo un DOM cáscara, donde se puede hacer un trabajo perfecto.

Aquí Insertar imagen Descripción

Publicado tres artículos originales · ganado elogios 2 · vistas 43

Supongo que te gusta

Origin blog.csdn.net/CS_lzx/article/details/105079475
Recomendado
Clasificación