Vue Academy · Ders

VueUse: Composable Kütüphanesi

useLocalStorage, useMouse, useWindowSize, useIntersectionObserver — pratik VueUse kullanımı.

4. ders / 413 adım

VueUse: Composable Kütüphanesi, 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.

VueUse Nedir

VueUse (@vueuse/core), yaygın görevler için hazır birleştirilebilir işlevlerden oluşan geniş bir koleksiyondur; depolama, sensörler, tarayıcı arayüzleri ve daha fazlasını içerir. Bunları yeniden yazma zahmetinden kurtarır.

npm install @vueuse/core

Kalıcı Saklama İçin useLocalStorage

useLocalStorage, localStorage ile eşitlenen bir referans döndürür. Değişiklikler, serileştirme sizin için yapılarak yeniden yüklemeler arasında otomatik olarak korunur.

import { useLocalStorage } from "@vueuse/core";
const name = useLocalStorage("name", "Guest");
// name.value persists in localStorage

Reaktif ve Kalıcı

Döndürülen referans diğerleri gibi davranır; onu v-model ile bağlayabilirsiniz. Ancak VueUse depolama alanına yazarak değerini sayfa yenilemelerinden sonra da korur.

<input v-model="name" />

İmleç Konumu İçin useMouse

useMouse, işaretçiyi izler ve imleç hareket ettikçe güncellenen reaktif x ve y referanslarını döndürür.

import { useMouse } from "@vueuse/core";
const { x, y } = useMouse();

Fare Koordinatlarını Görüntüleme

Referansları şablona bağlayın; dinleyicileri kendiniz bağlamadan fare her hareket ettiğinde güncellenirler.

<p>Cursor: {{ x }}, {{ y }}</p>

Boyutlar İçin useWindowSize

useWindowSize, yeniden boyutlandırma sırasında güncellenen reaktif width ve height referansları sağlar; bu, betik içindeki duyarlı mantık için çok kullanışlıdır.

import { useWindowSize } from "@vueuse/core";
const { width, height } = useWindowSize();

Duyarlı Mantık

Düzen kararlarını reaktif olarak yönlendirmek için pencere boyutunu hesaplanmış bir değerle birleştirin.

import { computed } from "vue";
const isMobile = computed(() => width.value < 768);

Tembel Yükleme İçin useIntersectionObserver

useIntersectionObserver, bir öğenin görünüm alanına ne zaman girdiğini bildirir; bu, görselleri tembel yüklemenin veya sonsuz kaydırmanın temelidir.

import { useIntersectionObserver } from "@vueuse/core";
const target = ref(null);

Görünürlükte Tetikleme

Bir şablon referansı ve kesişim girdileriyle çağrılan bir geri çağrı geçirin. Hedef görünür olduğunda görseli yükleyin veya daha fazla veri getirin.

useIntersectionObserver(target, ([entry]) => {
  if (entry.isIntersecting) loadImage();
});

Otomatik Temizleme

Önemli bir avantaj şudur: VueUse birleştirilebilir işlevleri, kendi dinleyicilerini ve gözlemcilerini kaldırılma sırasında kaydeder ve kaldırır. Doğru temizlemeyi hiçbir ek işlem yapmadan elde edersiniz.

VueUse Neden Kullanılır

Ağaç sarsma özelliğini destekler, iyi test edilmiştir ve TypeScript önceliklidir. Depolama, sensörler, ağ ve zaman gibi yaygın gereksinimler için kendi birleştirilebilir işlevinizi yazmadan önce VueUse'a başvurun.

Kısa Kontrol

Bir referansı localStorage'a kalıcı olarak saklayan VueUse birleştirilebilir işlevi hangisidir?

İnteraktif derste cevapla

Özet

VueUse'u incelediniz: useLocalStorage (kalıcı durum), useMouse (imleç konumu), useWindowSize (reaktif boyutlar) ve useIntersectionObserver (tembel yükleme tetikleyicisi); tümü otomatik temizleme ve ağaç sarsma desteği sunar.

Başlamak ücretsiz

Yapay zeka eğitmeniyle HTML öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 42
Dersler: 156

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“VueUse: Composable Kütüphanesi” dersi ücretsiz mi?

Evet — “VueUse: Composable Kütüphanesi” 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.

“VueUse: Composable Kütüphanesi” dersinde ne öğreneceğim?

useLocalStorage, useMouse, useWindowSize, useIntersectionObserver — pratik VueUse kullanımı. 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.

“VueUse: Composable Kütüphanesi” 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