Descripción detallada del ciclo de vida de vue

En el código fuente de vue, la ejecución final de la función del ciclo de vida es llamar al método callHook. La lógica de la función callHook es muy simple. De acuerdo con el enlace de tipo de ciclo de vida entrante, obtenga la matriz de funciones de devolución de llamada correspondiente a la máquina virtual. $ opciones [gancho] y luego recorre la ejecución, utilizando vm como contexto de ejecución de la función.

1. Crear un nuevo Vue (opción): crear una instancia de VM;

2. Fusionar opciones (constructor de análisis (VM. Constructor), opciones, VM): convertir el Vue. constructor Las opciones en se fusionan con las opciones entrantes, o las opciones del padre y el hijo se fusionan. Por ejemplo, en la función mergeOptions, se llamará al método mergeHook para fusionar las funciones Hook del ciclo de vida. El principio del método mergeHook es devolver la matriz principal solo si es una matriz principal y devolver la matriz secundaria solo si es una matriz secundaria. Cuando existen elementos padre e hijo, agregue el elemento hijo después del elemento padre para devolver una matriz combinada. Es por eso que cuando tanto el padre como el hijo tienen funciones de gancho, primero se ejecuta el padre y luego la persona;

3. , propiedades relacionadas con eventos y renderizado;

4.callHook(vm,' beforeCreate'): llama a la función de enlace del ciclo de vida antes de Crear;

5.initInjections(vm), initState (vm) e initProvide(vm): datos de inicialización: inyección, declaración y provisión. La función de initState es inicializar accesorios, datos, métodos, vigilancia, atributos calculados y otros;

6.callHook(vm,'created'): llama a la función de enlace del ciclo de vida creada;

7.VM. $ mount (VM. $ options . El): El método $ mount se define en varios archivos, como "src/platform/web/entry-runtime-with-compiler. js", "src/platform/web/runtime/ index" . js", "src/platform/week/. Debido a que la implementación del método $mount está relacionada con la plataforma y el modo de construcción. Tomando "entry-runtime-with-compiler.js" como ejemplo, el paso clave es verificar si hay un método de renderizado en vm. $options; de lo contrario, la cadena de plantilla final se determinará en función de los atributos el y de plantilla. Luego se llama al método compileToFunctions para convertir la cadena de plantilla en el método de renderizado. , y finalmente se llama al método $mount en el prototipo original, que comienza a ejecutar "lifecycle.js" "método mountComponent en ";

8.callHook(vm, 'beforeMount'): llama a la vida beforeMount función de enlace de ciclo;

9.vm._ render()= & gt; vm. _ update() = > DOM, que es un VNode. Cada VNode tiene un nodo secundario y cada elemento del nodo secundario también. ¿Cómo se forma? vnodetree luego llama al método _update de la máquina virtual, que depende de la plataforma. cree un árbol Dom real basado en el árbol VNode generado de forma recursiva y móntelo en el Dom

10.callHook(vm, 'mount'): llame a la función de enlace periódico: después de que el VNode esté. parcheado en Dom, se ejecutará la función 'invokeInsertHook' y se ejecutará nuevamente la función de gancho de montaje guardada en insertVnodeQueue.

La función de enlace en la cola insertVnodeQueue es una cola secuencial de funciones de enlace generadas durante el proceso de creación del árbol Dom real de acuerdo con el método recursivo createElm de VNode Tree, por lo que el orden de ejecución de la función de enlace montada es primero el hijo y luego el padre. ;

11. Cambio de datos: actualización de datos, ejecutar el método flushSchedulerQueue en nextTick ejecutará el observador en la cola de observadores;

12.Callhook (VM, 'beforeUpdate'): Cuándo Al ejecutar el observador, el observador ejecutará el método Before, es decir, llamará a la función de enlace del ciclo de vida BeforeUpdate.

13 Renderizado y parcheo del DOM virtual: el nuevo renderizado genera un nuevo DOM virtual y parches. al DOM

14.callHook(vm, 'updated'): llama a la función de enlace del ciclo de vida actualizada;

15.vm. $destroy(): inicia el proceso de desinstalación y destrucción;

16.Callhook (VM, ' beforeDestroy '): llama a la función de enlace del ciclo de vida de antes de destruir

17. observador, subcomponentes y detectores de eventos: realiza una serie de operaciones de destrucción. Durante la ejecución de $destroy, ejecutará el vm. __patch__(máquina virtual. _vnode, null) para activar la función de enlace de destrucción de su subcomponente y llamarlo recursivamente capa por capa. Por lo tanto, el orden de ejecución de las funciones de enlace destruidas es primero el hijo y luego el padre.

18.Callhook (VM, 'destruido'): llama a la función de enlace del ciclo de vida destruido.

上篇: IG anunció oficialmente que fueron asignados a la clase exclusivamente china, pero Zaza no firmó el contrato. Sue dejó IG y comenzó a LDL, abandonando a su hijo y haciendo pedidos. 下篇: Zhou Gong Daquan moliendo fideos_¿Es bueno moler fideos en el sueño?