javascript - Diferencia entre los eventos creados y montados en Vue.js

Question

La documentación de Vue.js describe los eventos created y mounted 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 se ha iniciado y la propiedad $ el aún no estará disponible.

mounted

Se invoca después de que se haya montado la instancia donde el se reemplaza por el vm. $ El recién creado. Si la instancia raíz está montada en un elemento en el documento, vm. $ El también estará en el documento cuando se llame montado.

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:

1. ¿Hay algún caso en el que created se usaría sobre mounted ?
2. ¿Para qué puedo usar el evento created en una situación de la vida real (código real)?

Answer 1

created() : dado que el procesamiento de las opciones ha finalizado, tiene acceso a propiedades de data reactivos y cámbielos si lo desea. En esta etapa, DOM no se ha montado ni agregado todavía. Entonces no puedes hacer ninguna manipulación DOM aquí

mounted() : llamado después de que el DOM ha sido montado o renderizado. Aquí tiene acceso a los elementos DOM y la manipulación DOM se puede realizar, por ejemplo, obtenga el innerHTML:

console.log(element.innerHTML)

Entonces tus preguntas:

1. Is there any case where created would be used over mounted?

Created se usa generalmente para recuperar datos de la API de back-end y establecerlo en propiedades de datos como comentó wostex . Pero en el enganche SSR mounted() no está presente, debe realizar tareas como recuperar datos solo en el enganche creado

2. What can I use the created event for, in real-life (real-code) situation?

Para recuperar cualquier dato inicial requerido que se representará (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;
});
}