Diferencia entre los eventos creados y montados en Vue.js
La documentación de Vue.js describe los eventos createdy mountedde la siguiente manera:
created
Se llama sincrónicamente después de crear la instancia. En esta etapa, la instancia ha terminado de procesar las opciones, lo que significa que se ha configurado lo siguiente: observación de datos, propiedades calculadas, métodos, devoluciones de llamada de observación/evento. Sin embargo, la fase de montaje no ha comenzado y la propiedad $el aún no estará disponible.
mounted
Se llama después de que se acaba de montar la instancia donde el se reemplaza por el vm.$el recién creado. Si la instancia raíz está montada en un elemento del documento, vm.$el también estará en el documento cuando se llame a mount.
Este enlace no se llama durante la renderización del lado del servidor.
Entiendo la teoría, pero tengo 2 preguntas con respecto a la práctica:
- ¿Hay algún caso en el que
createdse utilizaría másmounted? - ¿ Para qué puedo usar el
createdevento en una situación de la vida real (código real)?
created(): una vez finalizado el procesamiento de las opciones, tienes acceso a las datapropiedades reactivas y puedes cambiarlas si lo deseas. En esta etapa, el DOM aún no se ha montado ni agregado. Entonces no puedes hacer ninguna manipulación DOM aquí
mounted(): llamado después de que el DOM haya sido montado o renderizado. Aquí tiene acceso a los elementos DOM y se puede realizar la manipulación DOM, por ejemplo, obtener el HTML interno:
console.log(element.innerHTML)
Entonces tus preguntas:
Is there any case where created would be used over mounted?
Creado generalmente se usa para recuperar datos de la API de backend y configurarlos en propiedades de datos. Pero en SSR mounted()el gancho no está presente, necesita realizar tareas como recuperar datos solo en el gancho creado
What can I use the created event for, in real-life (real-code) situation?
Para recuperar cualquier dato inicial requerido para ser renderizado (como JSON) desde una API externa y asignarlo a cualquier propiedad de datos reactiva
data:{
myJson : null,
errors: null
},
created(){
//pseudo code
database.get().then((res) => {
this.myJson = res.data;
}).catch((err) => {
this.errors = err;
});
}
