Różnica między utworzonymi i zamontowanymi zdarzeniami w Vue.js

Dokumentacja Vue.js opisuje zdarzenia createdi mountedw następujący sposób:

created

Wywoływane synchronicznie po utworzeniu instancji. Na tym etapie instancja zakończyła przetwarzanie opcji, co oznacza, że ​​skonfigurowano: obserwację danych, obliczone właściwości, metody, wywołania zwrotne watch / event. Jednak faza montażu nie została rozpoczęta, a właściwość $ el nie będzie jeszcze dostępna.

mounted

Wywoływana po zamontowaniu instancji, w której el jest zastępowany przez nowo utworzoną maszynę vm. $ El. Jeśli instancja główna jest podłączona do elementu w dokumencie, vm. $ El będzie również w dokumencie po wywołaniu zamontowania.

Ten punkt zaczepienia nie jest wywoływany podczas renderowania po stronie serwera.

Rozumiem teorię, ale mam 2 pytania dotyczące praktyki:

1. Czy jest jakiś przypadek, w którym createdzostanie użyty mounted?
2. Do czego mogę wykorzystać to createdwydarzenie w sytuacji z życia wziętego (rzeczywistego kodu)?

created(): ponieważ przetwarzanie opcji zostało zakończone, masz dostęp do datawłaściwości reaktywnych i możesz je zmienić, jeśli chcesz. Na tym etapie DOM nie został jeszcze zamontowany ani dodany. Więc nie możesz tutaj dokonywać żadnych manipulacji DOM

mounted(): wywoływana po zamontowaniu lub wyrenderowaniu DOM. Tutaj masz dostęp do elementów DOM i manipulację DOM można wykonać na przykład get the innerHTML:

console.log(element.innerHTML)

Więc twoje pytania:

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

Utworzony jest zwykle używany do pobierania danych z zaplecza API i ustawiania go na właściwości danych. Ale w mounted()haku SSR nie ma, musisz wykonywać zadania, takie jak pobieranie danych tylko w utworzonym haku

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

Do pobierania wszelkich początkowych danych wymaganych do renderowania (takich jak JSON) z zewnętrznego interfejsu API i przypisywania ich do dowolnych właściwości danych reaktywnych

data:{
    myJson : null,
    errors: null
},
created(){
    //pseudo code
    database.get().then((res) => {
        this.myJson = res.data;
    }).catch((err) => {
        this.errors = err;
    });
}