Vue.js'de oluşturulan ve bağlanan olaylar arasındaki fark

Vue.js belgeleri createdve mountedolayları aşağıdaki gibi açıklanmaktadır:

created

Örnek oluşturulduktan sonra senkronize olarak çağrılır. Bu aşamada, örnek seçenekleri işlemeyi bitirmiştir, bu da aşağıdakilerin ayarlandığı anlamına gelir: veri gözlemi, hesaplanan özellikler, yöntemler, izleme / olay geri çağrıları. Ancak, montaj aşaması başlatılmamıştır ve $ el özelliği henüz kullanılamayacaktır.

mounted

Örneğin, el'in yeni oluşturulan vm. $ El ile değiştirildiği yere monte edildikten sonra çağrılır. Kök örneği bir belge içi öğeye monte edilirse, monte edildiğinde vm. $ El de belge içinde olur.

Bu kanca, sunucu tarafı oluşturma sırasında çağrılmaz.

Teoriyi anlıyorum, ancak uygulama ile ilgili 2 sorum var :

1. createdKullanılacağı bir durum var mı mounted?
2. Ne kullanabilirsiniz createdgerçek yaşam (gerçek kodu) durumda yönelik etkinliği?

created(): seçeneklerin işlenmesi tamamlandığından, reaktif dataözelliklere erişebilir ve isterseniz bunları değiştirebilirsiniz. Bu aşamada DOM henüz monte edilmemiş veya eklenmemiştir. Yani burada DOM manipülasyonu yapamazsınız

mounted(): DOM takıldıktan veya oluşturulduktan sonra çağrılır. Burada DOM öğelerine erişebilirsiniz ve DOM manipülasyonu gerçekleştirilebilir, örneğin innerHTML'yi alın:

console.log(element.innerHTML)

Yani sorularınız:

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

Oluşturulan genellikle arka uç API'sından veri almak ve veri özelliklerine ayarlamak için kullanılır. Ancak SSR mounted()kancası mevcut değilse, yalnızca oluşturulan kancaya veri getirme gibi görevleri gerçekleştirmeniz gerekir

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

Harici API'den oluşturulması gereken ilk verileri (JSON gibi) almak ve bunları herhangi bir reaktif veri özelliğine atamak için

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