Laravel Türkiye Discord Kanalı Forumda kod paylaşılırken dikkat edilmesi gerekenler!Birlikte proje geliştirmek ister misiniz?

Vue.js Mounted ve Created Hooks anlamak

yalcin

Dökümantasyonda dahil heryerde sadece lifecycle hooks başlıgı altında anlatılıyor ve tüm bu hooks (kanca)ların belirli bir çalışma sırası var deniliyor . Evet bunu anlıyorum sayfa ilk yüklendiğinde yüklendikten sonra vs vs gibi bir sürü yüklenme sırası mevcut bunda anlaşılmaycak bi durum yok ancak ben gibi amatörseniz ve derin projelerile uğraşmıyor iseniz yaptığınız hata ve dolayısıyla hatalardan çıkarabileceğiniz dersler ve tecrübeler oldukça kısıtlı oluyor bu yüzden anlamakta zorlanıyorsunuz Aşşagıdaki kod blogunda TodaySell() metodu mounted içinde tanımnlı ise sayfada gösteriliyor mounted kancası yerine created kullanılsada gösteriliyor.

mounted ile created arasındaki fark sadece birbirlerine oranla çalışma sırasımı ?

diyelimki bir metodumuz daha var oda YearSell(); olsun yıllık satısları versin ve aynı sayfada mounted içinde günlük satışlar Created içindede yıllık satışlar olsun bu durumda metodlardan birinin 3-5 ms önce yada sonra çalışmasının bir önemi yok gibi duruyo

Birbirlerine oranla çalışma yada yüklenmr sırasının önemli oldugu bi iki senaryo söyleyebilirmisiniz ?

mounted(){
         this.TodaySell();

    },

    methods:{
         TodaySell(){
         axios.get('/api/today/sell')
        .then(({data}) => (this.todaysell = data))
        .catch()
     },

hcan

yalcin

1) mounted action kullandığınız zaman $el elementini de kullanabiliyor olursunuz. created action'da $el elementi kullanmazsınız. Çünkü daha DOM yerleşmemiştir. Başka farkları elbette vardır ama sanırım en önemli farkı DOM olayı.

2)
Örneğin sayfa açıldığında bir get isteği atalım, gelen verileri DOM'a gömelim:

     methods: {
        getUsers(){
          axios.get....
        }
      },
      created() {
        this.getUsers();
      }

ya da:

     methods: {
        getUsers(){
          axios.get....
        }
      },
      mounted() {
        this.getUsers();
      }

created action'da yazarsanız component oluştuğunda istek atılır. DOM'un oluşmasını beklemez. Component created olduğunda direkt istek atmış olursunuz. mounted ile yaptığımızda DOM oluşmuş olur. Hangisi hızlı dersek created demiş oluruz. Hatta component oluşmadan önce istek atmak istersek beforeCreate action'u kullanabiliriz. Tabi bunu kullanıldığımızda component henüz oluşmadığı için methods'ları kullanamayız:

beforeCreate() {
    axios.get....
  },

Eğer sayfa yüklendiğinde istek atıp, verileri almak istiyorsak ben created action derim. Çünkü DOM'un oluşumu beklemeden isteğini atar, arkadan cevabını bekler.

yalcin

Anlamak adına kabaca şöyle birşey dersem yanlış bir ifademi kullanmış olurum ..

Eğer Componentler arasında bir veri iletişimi mevcut ise örneğin bir parent componentten child componente veri gitmesi durumu söz konusu ise parent componenet'de Created kullanMaMalısın , çünkü Created metodu component oluştugunda çalışıcak bunun yerine mount et gitsinki component oluşmasada ordaki verileri child componente gönderebil. kabaca ve kısaca tertemiz saçmalıyoda olabilirm 🙂)
Böyle bir senaryom yok sadece mantıgını anlamaya çalışıyorum

hcan

yalcin Parent'tan child'a veri gönderme derken props'lardan bahsediyorsunuz sanırım. Hayır created fonksiyonu kullanabilirsiniz. Mount action created action'dan sonra geliyor. Yani component ilk önce created oluyor, sonra mount oluyor.

yalcin çünkü Created metodu component oluştugunda çalışıcak bunun yerine mount et gitsinki component oluşmasada ordaki verileri child componente gönderebil

Böyle bir şeyde her türlü component oluşacak. Mount kullandığımızda parent DOM'un yüklenmesini bekleyecek. Neden beklesin ki, zaten verileri child'a gönderiyor. Created ile verileri çek, child'a gönder. Benim parent DOM ile işim yok çünkü.

yalcin

Peki çok teşekkür ederim yanıtların için umarım konuyu okuyanlarada faydalı olur.Kendi adima umuyorumki bir gün bir uygulamada mounted yerine created yada tam tersi created yerine mounted kullandığım için bir hatayla karşılaşir 3-5 gün sırf bu hata yüzünden uğraşır ve tam olarak farkını anlamış olurum .. iyigecelerTekrar teşekkürler.

mgsmus

yalcin https://v3.vuejs.org/guide/instance.html#lifecycle-diagram

yalcin

teşekkürler