Perbedaan antara acara yang dibuat dan dipasang di Vue.js

Dokumentasi Vue.js menjelaskan createddan mountedacara - acara sebagai berikut:

created

Disebut sinkron setelah instance dibuat. Pada tahap ini, instance telah selesai memproses opsi yang berarti yang berikut telah disiapkan: observasi data, properti yang dihitung, metode, panggilan balik kejadian / acara. Namun, tahap pemasangan belum dimulai, dan properti $ el belum tersedia.

mounted

Dipanggil setelah instance baru saja dipasang di mana el digantikan oleh vm. $ El yang baru dibuat. Jika instance root di-mount ke elemen di-dokumen, vm. $ El juga akan di-dokumen saat di-mount dipanggil.

Hook ini tidak dipanggil selama rendering sisi server.

Saya mengerti teorinya, tetapi saya punya 2 pertanyaan tentang praktik:

1. Apakah ada kasus di mana createdakan digunakan mounted?
2. Apa yang bisa saya gunakan createduntuk acara, dalam situasi kehidupan nyata (kode nyata)?

created(): sejak pemrosesan opsi selesai, Anda memiliki akses ke dataproperti reaktif dan mengubahnya jika Anda mau. Pada tahap ini DOM belum dipasang atau ditambahkan. Jadi, Anda tidak dapat melakukan manipulasi DOM di sini

mounted(): dipanggil setelah DOM dipasang atau ditampilkan. Di sini Anda memiliki akses ke elemen DOM dan manipulasi DOM dapat dilakukan misalnya mendapatkan innerHTML:

console.log(element.innerHTML)

Jadi pertanyaan Anda:

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

Dibuat umumnya digunakan untuk mengambil data dari API backend dan mengaturnya ke properti data. Tetapi dalam SSR mounted()hook tidak ada, Anda perlu melakukan tugas-tugas seperti mengambil data di hook yang dibuat saja

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

Untuk mengambil data awal yang diperlukan untuk dirender (seperti JSON) dari API eksternal dan menugaskannya ke properti data reaktif apa pun

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