Vue Academy · Ders

script setup'te Composable'ları İçe Aktarma ve Kullanma

Composable'ları içe aktarma, üçüncü taraf VueUse composable'larını kullanma, içe aktarmaları düzenleme.

script setup'te Composable'ları İçe Aktarma ve Kullanma, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 4. 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.

Birleştirilebilir İşlevler ve script setup

Birleştirilebilir işlevler, reaktif mantığı yeniden kullanılmak üzere paketleyen işlevlerdir. <script setup> ile bunları kullanmak, üst düzeyde içe aktarıp çağırmak kadar basittir.

Üst Düzeyde İçe Aktarma

Birleştirilebilir işlevi her zaman <script setup> bölümünün üst düzeyinde çağırın; koşul, döngü veya iç içe bir işlev içinde çağırmayın. Böylece Vue, reaktivitesini ve yaşam döngüsü kancalarını doğru şekilde kaydeder.

<script setup>
import { useCounter } from './useCounter'
const { count, increment } = useCounter()
</script>

Üst Düzey Neden Önemlidir

Birleştirilebilir işlevler genellikle onMounted gibi yaşam döngüsü kancalarını kaydeder veya izleyiciler kurar. Bunların bileşen kurulumu sırasında çalışması gerekir; bu da yalnızca birleştirilebilir işlevi üst düzeyde eşzamanlı olarak çağırdığınızda gerçekleşir.

İhtiyacınız Olanları Yapıdan Çıkarın

Birleştirilebilir işlev, reaktif değerler ve işlevlerden oluşan bir nesne döndürür. Yalnızca bileşenin kullandıklarını yapıdan çıkarın; aynı birleştirilebilir işlevi iki kez çağırırken çakışmaları önlemek için adlarını değiştirin.

<script setup>
import { useMouse } from './useMouse'
const { x: mouseX, y: mouseY } = useMouse()
</script>

VueUse ile Tanışın

VueUse, kullanıma hazır birleştirilebilir işlevlerden oluşan popüler bir kütüphanedir. Yaygın mantığı kendiniz yazmak yerine test edilmiş bir birleştirilebilir işlevi içe aktarın. Kütüphaneyi bir kez kurun ve ihtiyacınız olanları içe aktarın.

<script setup>
import { useLocalStorage } from '@vueuse/core'
const name = useLocalStorage('name', 'Alice')
</script>

useLocalStorage İş Başında

useLocalStorage, localStorage ile eşitlenen bir ref döndürür. Ref'i değiştirin, tarayıcı depolaması güncellensin; sayfayı yeniden yüklediğinizde değer korunur.

<template>
  <input v-model="name" />
  <p>Saved: {{ name }}</p>
</template>

Reaktif Koordinatlar için useMouse

useMouse, işaretçi konumunu reaktif ref'ler olarak izler. Olay dinleyicisini sizin için ekleyip kaldırır; böylece temizliği hiçbir zaman elle yönetmeniz gerekmez.

<script setup>
import { useMouse } from '@vueuse/core'
const { x, y } = useMouse()
</script>

<template>
  <p>{{ x }}, {{ y }}</p>
</template>

Birleştirilebilir İşlevleri Birleştirme

Birleştirilebilir bir işlev başka birleştirilebilir işlevleri çağırabilir. Bu katmanlama, Composition API'nin temelidir — küçük parçalar oluşturup bunları daha büyük özelliklerde birleştirin.

import { useMouse } from '@vueuse/core'

export function useMouseDistance() {
  const { x, y } = useMouse()
  const distance = computed(() => Math.hypot(x.value, y.value))
  return { distance }
}

Üst Düzey await

<script setup>, await'i doğrudan üst düzeyde destekler. Bileşen asenkron bir kuruluma dönüşür ve çerçeve, vaat çözümlenene kadar oluşturmayı askıya alabilir.

<script setup>
const res = await fetch('/api/user')
const user = await res.json()
</script>

Asenkron Kurulum ile Suspense

Üst düzey await kullanan bir bileşen, üst bileşen tarafından bir <Suspense> sınırıyla sarılmalıdır. Suspense, asenkron kurulum tamamlanana kadar yedek içeriği gösterir.

<template>
  <Suspense>
    <AsyncUser />
    <template #fallback>Loading...</template>
  </Suspense>
</template>

En İyi Uygulamalar

Birleştirilebilir işlevleri use ön ekiyle adlandırın.
Onları yalnızca üst düzeyde çağırın.
Ref'ler (veya toRefs ile sarılmış bir reactive) döndürün.
Kendi çözümünüzü yazmadan önce yaygın ihtiyaçlar için VueUse'ı tercih edin.

Hızlı Kontrol

Birleştirilebilir işlevleri anladığınızı doğrulayın.

Özet

Birleştirilebilir işlevleri kullanmayı öğrendiniz:

Bunları <script setup> bölümünün üst düzeyinde içe aktarın ve çağırın.
İhtiyacınız olanları yapıdan çıkarın (ve yeniden adlandırın).
VueUse, useLocalStorage ve useMouse gibi kullanıma hazır birleştirilebilir işlevler sunar.
Üst düzey await, kurulumu asenkron hâle getirir ve <Suspense> ile birlikte kullanılır.

Sıkça Sorulan Sorular

“script setup'te Composable'ları İçe Aktarma ve Kullanma” dersi ücretsiz mi?

Evet — “script setup'te Composable'ları İçe Aktarma ve Kullanma” 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'te Composable'ları İçe Aktarma ve Kullanma” dersinde ne öğreneceğim?

Composable'ları içe aktarma, üçüncü taraf VueUse composable'larını kullanma, içe aktarmaları düzenleme. 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 4. dersidir.

“script setup'te Composable'ları İçe Aktarma ve Kullanma” 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

script setup'e Giriş
defineProps ve defineEmits
defineExpose ve useAttrs
script setup'te Composable'ları İçe Aktarma ve Kullanma

← Vue Academy Sayfasına Dön