Vue Academy · Ders

setup() İşlevi ve Reaktif Değişkenler

setup() giriş noktası, ilkel değerler için ref(), nesneler için reactive(), değerleri döndürme.

setup() İşlevi ve Reaktif Değişkenler, 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.

setup() Giriş Noktası

Bileşim API'si, setup() adlı özel bir bileşen seçeneğinin içinde bulunur. Bu işlev, bileşen oluşturulmadan önce bir kez çalışır ve reaktif state ile işlevleri tanımladığınız yerdir.

setup() işlevinden return ile döndürdüğünüz her şey şablonda kullanılabilir hale gelir.

ref ile Reaktif State Oluşturma

ref(), tek bir değeri (sayı, dize, boolean veya hatta bir nesne) reaktif bir kapsayıcıya sarar. Gerçek değer .value özelliğinde bulunur.

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    console.log(count.value) // 0
    return { count }
  }
}

reactive ile Reaktif Nesneler Oluşturma

reactive(), yalın bir nesne alır ve derinlemesine reaktif bir vekil döndürür. Özelliklerine doğrudan erişirsiniz; .value yoktur.

import { reactive } from 'vue'

export default {
  setup() {
    const user = reactive({ name: 'Alice', age: 30 })
    console.log(user.name) // Alice
    return { user }
  }
}

State'i Şablona Döndürme

setup() işlevinden nesne olarak döndürülen her şey bir şablon bağlaması olur. Burada hem count hem de user dışa açılır.

export default {
  setup() {
    const count = ref(0)
    const user = reactive({ name: 'Alice' })
    return { count, user }
  }
}

Şablonda Otomatik Sarmal Açma

JavaScript'te count.value yazdınız. Şablonda yalnızca count yazarsınız. Vue, üst düzey ref'lerin sarmalamasını otomatik olarak kaldırır; bu nedenle şablonda hiçbir zaman .value yazmazsınız.

<!-- template -->
<p>Count: {{ count }}</p>
<p>Name: {{ user.name }}</p>

İşlev Ekleme

setup() içinde tanımlanan işlevler, reaktif state'i okuyabilir ve değiştirebilir. Unutmayın: JavaScript içinde ref'ler için hâlâ .value kullanırsınız.

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    function increment() { count.value++ }
    return { count, increment }
  }
}

Şablonda Bağlama

İşlevi döndürün ve bir olaya bağlayın. Düğmeye tıklamak, ref'i değiştiren increment işlevini çağırır ve Vue yeniden görüntüler.

<!-- template -->
<button @click="increment">Count is {{ count }}</button>

this Anahtar Sözcüğüne Gerek Yok

setup() içinde this yoktur. Doğrudan tanımladığınız değişkenlerle çalışırsınız. Bu, kodu anlamayı kolaylaştırır ve TypeScript ile daha uyumlu hale getirir.

setup() içinde this kullanmaya çalışmak, bileşen örneğini size vermez.

setup Oluşturulmadan Önce Çalışır

setup() çok erken, created'dan ve bileşen örneği tamamen hazırlanmadan önce çalışır. Bu nedenle this kullanılamaz ve burada DOM'a henüz erişemezsiniz.

setup Bağımsız Değişkenleri: props ve context

setup(props, context), çözümlenmiş props değerlerini ilk bağımsız değişken olarak, bir context nesnesini de ikinci bağımsız değişken olarak alır. Context; attrs, slots, emit ve expose değerlerini sunar.

export default {
  props: { title: String },
  setup(props, context) {
    console.log(props.title)
    context.emit('ready')
  }
}

Eksiksiz Bir Mini Bileşen

Her şey burada bir arada: bir ref, bir reaktif nesne, bir işlev ve döndürülen bağlamalar.

import { ref, reactive } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const user = reactive({ name: 'Alice' })
    function increment() { count.value++ }
    return { count, user, increment }
  }
}

Hızlı Kontrol

setup() ve reaktif değişkenleri anladığınızdan emin olun.

Özet

Bileşim API'sinin temellerini öğrendiniz:

setup(), oluşturulmadan önce bir kez çalışır ve şablon bağlamaları döndürür.
ref() bir değeri sarar; JS içinde .value kullanın.
reactive() bir nesneyi sarar; özelliklerine doğrudan erişin.
Şablonlar ref'lerin sarmalamasını otomatik olarak kaldırır, bu nedenle orada .value kullanmazsınız.
setup() içinde this yoktur.

Sıkça Sorulan Sorular

“setup() İşlevi ve Reaktif Değişkenler” dersi ücretsiz mi?

Evet — “setup() İşlevi ve Reaktif Değişkenler” 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.

“setup() İşlevi ve Reaktif Değişkenler” dersinde ne öğreneceğim?

setup() giriş noktası, ilkel değerler için ref(), nesneler için reactive(), değerleri döndürme. 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.

“setup() İşlevi ve Reaktif Değişkenler” 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

Composition API Neden Kullanılır?
setup() İşlevi ve Reaktif Değişkenler
ref ve reactive: Hangisi Ne Zaman Kullanılır?
Composition API'de Computed ve Watch

← Vue Academy Sayfasına Dön