0Pricing
Vue Academy · Ders

Vue DevTools Performans Sekmesiyle Profil Oluşturma

Bileşen güncellemelerini kaydetme, gereksiz yeniden işlemeleri belirleme ve bileşen zamanlaması.

Vue DevTools Performans Sekmesiyle Profil Oluşturma, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Neden Profil Oluşturmalısınız

İyileştirme yapmadan önce zamanın nereye harcandığını bilmelisiniz. Vue DevTools, bileşen oluşturmalarını kaydeden bir performans/zaman çizelgesi görünümü içerir; böylece tahmin etmek yerine boşa harcanan işi bulabilirsiniz.

Vue DevTools'u Yükleme

Tarayıcı uzantısını yükleyin veya bağımsız uygulamayı çalıştırın. Vite projelerinde vite-plugin-vue-devtools eklentisi uygulama içi bir denetleyici ekler.

npm install -D vite-plugin-vue-devtools

Kayıt Başlatma

DevTools'un zaman çizelgesi/performans sekmesini açın ve kayıt düğmesine basın, ardından uygulamanızla etkileşim kurun. Bu zaman aralığındaki oluşturma etkinliğini yakalamak için kaydı durdurun.

Bileşen Oluşturma Zaman Çizelgesi

Her bileşen oluşturması, zaman çizelgesinde bir olay olarak görünür. Bir bileşenin ne zaman yeniden oluşturulduğunu ve oluşturmanın ne kadar sürdüğünü görebilirsiniz.

Uygulama Grafiği

Bir uygulama, güncellemelerin DOM'a tek seferde gönderilmesidir. Uygulama grafiği, her uygulamayı ve o sırada hangi bileşenlerin oluşturulduğunu gösterir; böylece beklenenden çok daha fazla bileşene dokunan uygulamaları fark edebilirsiniz.

Bileşen Sürelerinin Alev Grafiği

Alev grafiği, üst ve alt bileşenlerin oluşturma sürelerini üst üste yerleştirir. Geniş çubuklar yavaş oluşturmaları, derin yığınlar ise oluşturmanın ağaç boyunca nasıl yayıldığını gösterir.

Gereksiz Oluşturmaları Belirleme

Gereksiz oluşturma, yeniden oluşturulduğu hâlde aynı çıktıyı üreten bir bileşendir. Bunlar, sonucunun DOM'u değiştirmediği yinelenen oluşturma olayları olarak görünür.

Aynı Çıktı, Yeni Oluşturma

Yaygın bir neden, her oluşturma sırasında yeni oluşturulmuş bir nesnenin veya satır içi ok işlevinin özellik olarak geçirilmesidir; bu, anımsamayı bozar. Görünen çıktısı aynı olsa bile alt bileşen yeniden oluşturulur.

<!-- new object every parent render forces child update -->
<Child :config="{ mode: 'a' }" />

Kararlı Referanslarla Düzeltme

Sabitleri üst kapsama taşıyın veya türetilmiş verileri computed ile sarın; böylece oluşturma işlemleri arasında aynı referans geçirilir.

const config = { mode: "a" };
// or: const config = computed(() => ({ mode: mode.value }));

Etkileşimlerle İlişkilendirme

Zaman çizelgesi, fare ve klavye olaylarını da kaydeder. En iyi duruma getirilecek kesin kod yolunu bulmak için yavaş bir işlemeyi onu tetikleyen etkileşimle eşleştirin.

Bileşen İnceleyicisi Oluşturma Sayısı

Bileşen inceleyicisi, bileşenler güncellendiğinde onları vurgulayabilir. İlgisiz her durum değişikliğinde bir sayacın yanıp sönmesini izlemek, gereğinden fazla yeniden oluşturmayı anında ortaya çıkarır.

Kısa Kontrol

Performans sekmesindeki işleme grafiği neyi temsil eder?

Özet

Oluşturmaları kaydetmek için Vue DevTools performans/zaman çizelgesi sekmesini kullanın. İşleme grafiği her DOM güncellemesini ve oluşturulan bileşenlerini gösterirken alev grafiği yavaş oluşturmaları ortaya çıkarır. Boşa yapılan oluşturmaları, yani çıktısı değişmeden yeniden oluşturulan bileşenleri arayın; bunlara çoğunlukla kararsız özellik referansları neden olur. Bu durumu, sabitleri üst kapsama taşıyarak veya computed kullanarak düzeltin.

Sıkça Sorulan Sorular

“Vue DevTools Performans Sekmesiyle Profil Oluşturma” dersi ücretsiz mi?

Evet — “Vue DevTools Performans Sekmesiyle Profil Oluşturma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“Vue DevTools Performans Sekmesiyle Profil Oluşturma” dersinde ne öğreneceğim?

Bileşen güncellemelerini kaydetme, gereksiz yeniden işlemeleri belirleme ve bileşen zamanlaması. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.

“Vue DevTools Performans Sekmesiyle Profil Oluşturma” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Şablon Önbellekleme için v-memo
  2. Vue DevTools Performans Sekmesiyle Profil Oluşturma
  3. Büyük Listeler için Sanal Kaydırma
  4. Vue ile Web Worker'lar
← Vue Academy Sayfasına Dön