Vue Academy · Pelajaran

VueUse: Pustaka Composable

useLocalStorage, useMouse, useWindowSize, useIntersectionObserver — penggunaan praktis VueUse.

VueUse: Pustaka Composable adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Apa Itu VueUse

VueUse (@vueuse/core) adalah kumpulan besar komposabel siap pakai untuk berbagai tugas umum—penyimpanan, sensor, API peramban, dan lainnya. VueUse menghemat waktu Anda karena tidak perlu membuatnya dari awal.

npm install @vueuse/core

useLocalStorage untuk Persistensi

useLocalStorage mengembalikan ref yang disinkronkan dengan localStorage. Perubahan akan bertahan setelah pemuatan ulang secara otomatis, dengan serialisasi yang ditangani untuk Anda.

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

Reaktif dan Persisten

Ref yang dikembalikan berperilaku seperti ref lainnya—ikat dengan v-model—tetapi nilainya tetap ada setelah halaman disegarkan karena VueUse menulisnya ke penyimpanan.

<input v-model="name" />

useMouse untuk Posisi Kursor

useMouse melacak penunjuk dan mengembalikan ref x serta y yang reaktif dan diperbarui saat kursor bergerak.

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

Menampilkan Koordinat Tetikus

Ikat ref di dalam templat; ref tersebut diperbarui pada setiap pergerakan tetikus tanpa perlu memasang pendengar sendiri.

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

useWindowSize untuk Dimensi

useWindowSize menyediakan ref width dan height yang reaktif, lalu memperbaruinya saat ukuran berubah—sangat berguna untuk logika responsif di dalam skrip.

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

Logika Responsif

Gabungkan ukuran jendela dengan nilai terhitung untuk mengatur keputusan tata letak secara reaktif.

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

useIntersectionObserver untuk Pemuatan Tertunda

useIntersectionObserver memberi tahu Anda saat suatu elemen memasuki area tampilan—dasar untuk memuat gambar secara tertunda atau menggulir tanpa akhir.

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

Memicu Saat Terlihat

Teruskan ref templat dan fungsi panggilan balik yang dipicu bersama entri persinggungan. Muat gambar atau ambil data tambahan saat target terlihat.

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

Pembersihan Otomatis

Manfaat besarnya: komposabel VueUse mendaftarkan dan menghapus pendengar serta pengamatnya sendiri saat komponen dilepas. Anda mendapatkan pembersihan yang benar secara otomatis.

Mengapa Menggunakan VueUse

VueUse mendukung penghapusan kode yang tidak terpakai, telah diuji dengan baik, dan mengutamakan TypeScript. Untuk kebutuhan umum—penyimpanan, sensor, jaringan, dan waktu—gunakan VueUse sebelum menulis komposabel sendiri.

Pemeriksaan Singkat

Komposabel VueUse mana yang menyimpan ref ke localStorage secara persisten?

Ringkasan

Anda telah mengenal VueUse: useLocalStorage (keadaan persisten), useMouse (posisi kursor), useWindowSize (dimensi reaktif), dan useIntersectionObserver (pemicu pemuatan tertunda), semuanya dengan pembersihan otomatis dan penghapusan kode yang tidak terpakai.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “VueUse: Pustaka Composable” gratis?

Ya — teks lengkap “VueUse: Pustaka Composable” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “VueUse: Pustaka Composable”?

useLocalStorage, useMouse, useWindowSize, useIntersectionObserver — penggunaan praktis VueUse. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “VueUse: Pustaka Composable” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Vue Academy