0Pricing
Vue Academy · Ders

script setup'e Giriş

öğesinin setup() işlevine nasıl derlendiği, otomatik içe aktarmalar, şablonda kullanılabilen üst düzey bağlamalar.

script setup'e Giriş, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 1. 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.

Daha Sade Composition API

<script setup>, Composition API için derleme zamanında uygulanan sözdizimsel bir kısayoldur. Tekrarlı kodları ortadan kaldırarak tek dosyalı bileşenlerinizin reaktif değişkenler içeren düz JavaScript gibi okunmasını sağlar.

setup() işlevinden script setup'a

Klasik biçimde bir export default, bir setup() işlevi ve açıkça yazılmış bir return gerekir. Bunu <script setup> sürümüyle karşılaştırın.

<!-- classic -->
<script>
import { ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    return { count }
  }
}
</script>

script setup Sürümü

<script setup> kullanıldığında sarmalayıcı bir nesne ve return ifadesi gerekmez. Üst düzey değişkenler şablona otomatik olarak açılır.

<!-- script setup -->
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

Açıkça Return Yazmak Gerekmez

Derleyici; değişkenleri, işlevleri ve içe aktarmaları içeren her üst düzey bağlamayı şablonda kullanılabilir kabul eder. Daha az kod yazarsınız ve bir şeyi return etmeyi unutma riskiniz olmaz.

Üst Düzey İşlevler de Kullanılabilir

Üst düzeyde bir işlev tanımlayın ve onu doğrudan şablona bağlayın. Onu return etmeniz gerekmez.

<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() { count.value++ }
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>

İçe Aktarılan Bileşenler Otomatik Olarak Kaydedilir

Klasik API'de bileşenleri bir components seçeneğinde listelemeniz gerekirdi. <script setup> ile bir bileşeni içe aktarmanız, onu şablonda kullanılabilir hâle getirir.

<script setup>
import BaseButton from './BaseButton.vue'
</script>

<template>
  <BaseButton />
</template>

Yine de setup() İşlevine Derlenir

Derleyici, arka planda <script setup> bölümünü normal bir setup() işlevine dönüştürür. Daha temiz bir yazım deneyimiyle aynı davranışı ve performansı elde edersiniz.

lang ts ile TypeScript Ekleme

Etikete lang="ts" ekleyerek TypeScript'i etkinleştirin. Ardından değişkenlere tür verebilir, derleyici makrolarında genel türleri kullanabilir ve tam tür çıkarımından yararlanabilirsiniz.

<script setup lang="ts">
import { ref } from 'vue'
const count = ref<number>(0)
</script>

Derleyici Makroları

<script setup> içinde defineProps, defineEmits ve defineExpose gibi özel derleyici makrolarına erişirsiniz. Bunlar içe aktarılmaz; derleyici onları tanır. Yaklaşan derslerde her birini inceleyeceksiniz.

Normal bir script Bloğuyla Birlikte Kullanma

Bazen özel bir bileşen adı gibi modül kapsamına ait bir kez çalıştırılan seçeneklere ihtiyaç duyarsınız. Normal bir <script> bloğunu <script setup> bloğunun yanına ekleyebilirsiniz.

<script>
export default { name: 'MyComponent' }
</script>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

Ekipler script setup'ı Neden Tercih Ediyor

  • Daha az tekrarlı kod — sarmalayıcı nesne veya return gerekmez.
  • Bileşenler otomatik olarak kaydedilir.
  • Derleme zamanı analizi sayesinde çalışma zamanı performansı daha iyidir.
  • TypeScript desteği mükemmeldir.

Vue 3 tek dosyalı bileşenleri için önerilen yazım biçimidir.

Hızlı Kontrol

script setup konusunu anladığınızı doğrulayın.

Özet

<script setup> ile ilgili temel bilgileri öğrendiniz:

  • setup() üzerine uygulanan derleme zamanı sözdizimsel bir kısayoldur.
  • Açıkça return yazılmaz; üst düzey bağlamalar otomatik olarak açılır.
  • İçe aktarılan bileşenler otomatik olarak kaydedilir.
  • TypeScript için lang="ts" ekleyin.
  • defineProps gibi derleyici makroları içe aktarma olmadan kullanılabilir.

Sıkça Sorulan Sorular

“script setup'e Giriş” dersi ücretsiz mi?

Evet — “script setup'e Giriş” 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.

“script setup'e Giriş” dersinde ne öğreneceğim?

öğesinin setup() işlevine nasıl derlendiği, otomatik içe aktarmalar, şablonda kullanılabilen üst düzey bağlamalar. 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 1. dersidir.

“script setup'e Giriş” 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. script setup'e Giriş
  2. defineProps ve defineEmits
  3. defineExpose ve useAttrs
  4. script setup'te Composable'ları İçe Aktarma ve Kullanma
← Vue Academy Sayfasına Dön