Vue Academy · Ders

Notlandırma Teknikleri

Notlandırma ile gereksiz hesaplamalardan kaçının.

Notlandırma Teknikleri, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 3 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 3 dersten oluşur.

Daha Az İş Yapmak

Performans çoğu zaman değişmemiş şeyleri yeniden hesaplamamaktan veya yeniden oluşturmamaktan gelir. Vue, sonuçları cache'leyip gereksiz güncellemeleri atlamanızı sağlayan çeşitli anımsama araçları sunar.

Hesaplanan Değerleri Önbelleğe Alma

Hesaplanan bir özellik, sonucunu önbelleğe alır ve yalnızca reaktif bağımlılıklarından biri değiştiğinde yeniden hesaplanır. Bu nedenle her oluşturmada çalışan bir yöntemden çok daha az maliyetlidir.

computed: {
  expensiveTotal() {
    return this.items.reduce((sum, i) => sum + i.price, 0)
  }
}

Hesaplanan Değer mi, Yöntem mi?

Bir yöntem, girdileri aynı olsa bile şablon her yeniden oluşturulduğunda çalışır. Hesaplanan bir değer, önbelleğe alınmış değerini yeniden kullanır; bu nedenle şablonlarda kullanılan türetilmiş veriler için hesaplanan değerleri tercih edin.

// method: runs on EVERY render
methods: { total() { /* ... */ } }

// computed: cached until items change
computed: { total() { /* ... */ } }

Statik İçerik İçin v-once

v-once yönergesi bir öğeyi tek sefer oluşturur ve sonraki tüm güncellemelerde onu atlar. Hiç değişmeyen içerikler için kullanın.

<template>
  <h1 v-once>{{ appTitle }}</h1>
</template>

v-once Ne Zaman Kullanılır?

v-once yönergesini alt bilgi, koşul metni veya sabit bir üst bilgi gibi büyük statik bölümlere uygulayın. Vue, oluşturulan çıktıyı statik kabul eder ve onu bir daha karşılaştırmaz.

<footer v-once>
  <p>Copyright 2024. All rights reserved.</p>
</footer>

Maliyetli Listeler İçin v-memo

v-memo yönergesi bir alt ağacı anımsar ve yalnızca bağımlılık dizisindeki değerler değiştiğinde onu yeniden oluşturur. Büyük listelerde özellikle etkilidir.

<div v-for="item in list" :key="item.id" v-memo="[item.selected]">
  {{ item.name }} - {{ item.selected }}
</div>

v-memo Nasıl Çalışır?

Her öğe yalnızca kendi anımsama dizisi değiştiğinde yeniden oluşturulur. item.selected aynı kaldığında Vue, üst bileşen güncellense bile o satırı tamamen yeniden oluşturmaktan kaçınır.

Gereksiz Yeniden Oluşturmalardan Kaçınma

Bileşenler, reaktif verileri veya özellikleri değiştiğinde yeniden oluşturulur. Bileşenleri küçük ve tek bir amaca odaklı tutun; böylece bir alandaki değişiklik ilgisiz bölümlerin yeniden oluşturulmasını zorlamaz.

Listelerde Kararlı Anahtarlar

v-for yönergesine her zaman kararlı ve benzersiz bir :key verin. Dizi dizinini anahtar olarak kullanmak, Vue'nun yanlış DOM düğümlerini yeniden kullanmasına ve gerekenden fazla yeniden oluşturma yapmasına neden olabilir.

<!-- prefer a stable id -->
<li v-for="user in users" :key="user.id">{{ user.name }}</li>

Reaktif Verileri En Azda Tutma

Verileri yalnızca şablon bunlara bağlıysa reaktif duruma koyun. Kullanıcı arayüzünde hiç değişmeyen büyük nesneler veya değerler, reaktiflik takibine ek yük getirir. Uygun olduğunda sıradan, reaktif olmayan değişkenler kullanın.

import { shallowRef } from "vue"

// shallowRef avoids deep reactivity on large objects
const bigConfig = shallowRef(loadConfig())

Saf İşlevleri Önbelleğe Alma

Vue reaktifliğinin dışındaki saf JavaScript hesaplamaları için sonuçları basit bir haritada önbelleğe alabilirsiniz; böylece aynı girdiye yapılan tekrarlı çağrılar anında sonuç döndürür.

const cache = new Map()
function fib(n) {
  if (n < 2) return n
  if (cache.has(n)) return cache.get(n)
  const result = fib(n - 1) + fib(n - 2)
  cache.set(n, result)
  return result
}

Hızlı Kontrol

Anımsama konusundaki bilginizi sınayın.

Özet

Önbelleğe almayla boşa harcanan işleri azaltın: hesaplanan özellikler türetilmiş değerleri anımsar, v-once statik içeriği tek sefer oluşturur ve v-memo büyük listelerde alt ağaçların yeniden oluşturulmasını atlar. Kararlı anahtarlar kullanın ve reaktif durumu en azda tutun. Sırada, gerçek araçlarla performans darboğazlarını bulup düzeltmeyi öğreneceksiniz.

Sıkça Sorulan Sorular

“Notlandırma Teknikleri” dersi ücretsiz mi?

Evet — “Notlandırma Teknikleri” 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 3 dersten oluşur.

“Notlandırma Teknikleri” dersinde ne öğreneceğim?

Notlandırma ile gereksiz hesaplamalardan kaçının. 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, 3 dersinin 2. dersidir.

“Notlandırma Teknikleri” 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

← Vue Academy Sayfasına Dön