En el ciclo de vida de Vue, ¿cuál es la diferencia entre creación y montaje?

La diferencia entre creado y montado en el ciclo de vida de vue es que se llama a creado antes de que la plantilla se represente en HTML, y el valor debe inicializarse antes de representar la vista. Se llama a Montado después de representar en HTML, es decir, el HTML es; ejecutar después de que se complete la página de inicialización.

Cada instancia de vue debe pasar por una serie de procesos de inicialización antes de ser creada. Este es el ciclo de vida de Vue. Hoy presentaré la diferencia entre creación y montaje en el ciclo de vida de vue. Espero que sea útil para todos.

Curso recomendado: Tutorial de Vue.js

La diferencia entre creación y carga

Vemos dos nodos en la imagen:

Creado : Se llama antes de que la plantilla se represente en html, es decir, algunos valores de atributos generalmente se inicializan y luego se representan en la vista.

Montado: se llama después de que la plantilla se representa en HTML, generalmente después de que se completa la página de inicialización, y luego realiza algunas operaciones necesarias en el nodo DOM del HTML.

De hecho, los dos son más fáciles de entender. Por lo general, creado se usa varias veces, mientras que montado generalmente se opera durante el uso de algunos complementos o componentes, como el uso del complemento chart.js: varctx = documento. getElementByid(ID); este paso suele ocurrir. Si lo escribe como un componente, encontrará que el gráfico no se puede inicializar al crearlo y debe esperar hasta que se represente el html, por lo que montarlo es la mejor opción.

Ejemplo:

Vue.component("demo1", {

Datos: función(){

Devolver {

Nombre: "",

Edad: "",

Ciudad: ""

}

},

Plantilla: "ltul gt lt李id = ' nombre ' gt{ { nombre } } lt/李gt lt李gt{ {edad} } lt/李gt lt李gt{ { ciudad } } lt/ Li gt lt/ul >,

Creado: función (){

This.name = "Zhang San"

this.age = "12 "

This.city = "Hefei"

Var x = document.getelementbyid(" nombre ")// Primer error de consola (x . internalhtml

},

Instalado: function() {

Var x = document.getelementbyid(" name ")// La salida de la segunda consola

. consola . log(x . internalhtml);

}

});

var vm = new Vue({

el: "#example1 "

})

Puedes ver que todos tienen éxito con el valor inicial dado por Rendered creado

Pero mientras tanto, mira. la consola de la siguiente manera:

Como puedes ver, el primer error reportado es porque getElementById(id) no encuentra el elemento, por las siguientes razones:

Al crearlo, el html en la vista no se representa, por lo que si opera directamente el nodo dom del html en este momento, no se encontrará el elemento creado.

En el montaje, dado que el HTML se ha renderizado en este momento, el nodo dom se puede operar directamente, por lo que el resultado de salida es "Zhang San".