La documentación de Vue.js describe los eventos created y mounted de la siguiente manera:
createdSe 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 llamadas de vigilancia/eventos. Sin embargo, la fase de montaje no se ha iniciado y la propiedad $el aún no estará disponible.
mountedSe 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 al montaje.
Este enlace no se llama durante la representación del lado del servidor.
Entiendo la teoría, pero tengo 2 preguntas con respecto a la práctica:
created se usaría sobre mounted ?created , en una situación de la vida real (código real)?created() : dado que el procesamiento de las opciones ha terminado, tiene acceso a las propiedades de los data reactivos y los cambia si lo desea. En esta etapa, DOM aún no se ha montado ni agregado. Entonces no puedes hacer ninguna manipulación DOM aquí
mounted() : se llama después de que el DOM se haya 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 obtener datos de la API de back-end y establecerlos en las propiedades de los datos. Pero en SSR mounted() el gancho no está presente, debe realizar tareas como obtener datos solo en el gancho creado
What can I use the created event for, in real-life (real-code) situation?Para obtener cualquier dato inicial requerido para ser procesado (como JSON) desde una API externa y asignarlo a cualquier propiedad de datos reactivos
data:{ myJson : null, errors: null }, created(){ //pseudo code database.get().then((res) => { this.myJson = res.data; }).catch((err) => { this.errors = err; }); }Para el gancho created(), los datos después de la manipulación en el navegador no se muestran en el DOM antes de montarlos. En palabras simples, los datos toman tiempo para manipular el DOm visto en el navegador.
Se llama al gancho montado () después de que el DOM se haya montado o renderizado, lo que le permite tener acceso a los elementos del DOM y puede realizar la manipulación del DOM. El mejor uso para el gancho montado es si necesita acceder al DOM inmediatamente antes o después. después del renderizado inicial.