Vue Academy · Pelajaran

Mengimpor dan Menggunakan Composable dalam script setup

Mengimpor composable, menggunakan composable VueUse pihak ketiga, mengatur impor.

Mengimpor dan Menggunakan Composable dalam script setup 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.

Komposabel dan script setup

Komposabel adalah fungsi yang mengemas logika reaktif agar dapat digunakan kembali. Dengan <script setup>, penggunaannya semudah mengimpor lalu memanggilnya di tingkat atas.

Mengimpor di Tingkat Atas

Selalu panggil komposabel di tingkat atas <script setup>—bukan di dalam kondisi, perulangan, atau fungsi bersarang. Dengan demikian, Vue dapat mendaftarkan reaktivitas dan kait siklus hidupnya dengan benar.

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

Mengapa Tingkat Atas Penting

Komposabel sering mendaftarkan kait siklus hidup seperti onMounted atau menyiapkan pengamat. Semua itu harus berjalan selama penyiapan komponen, yang hanya terjadi jika Anda memanggil komposabel secara sinkron di tingkat atas.

Destrukturkan yang Anda Perlukan

Komposabel mengembalikan objek berisi nilai dan fungsi reaktif. Destrukturkan hanya yang digunakan komponen; ganti namanya untuk menghindari benturan saat memanggil komposabel yang sama dua kali.

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

Kenali VueUse

VueUse adalah pustaka komposabel siap pakai yang populer. Daripada menulis logika umum sendiri, impor komposabel yang telah diuji. Instal sekali, lalu impor yang Anda perlukan.

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

useLocalStorage dalam Praktik

useLocalStorage mengembalikan ref yang disinkronkan dengan localStorage. Ubah ref tersebut dan penyimpanan peramban akan diperbarui; muat ulang halaman dan nilainya tetap tersimpan.

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

useMouse untuk Koordinat Reaktif

useMouse melacak posisi penunjuk sebagai ref reaktif. Komposabel ini menambahkan dan menghapus pendengar peristiwa untuk Anda, sehingga Anda tidak perlu mengelola pembersihan secara manual.

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

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

Komposabel Dapat Disusun

Sebuah komposabel dapat memanggil komposabel lain. Pelapisan ini merupakan inti Composition API—bangun bagian-bagian kecil dan gabungkan menjadi fitur yang lebih besar.

import { useMouse } from '@vueuse/core'

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

await di Tingkat Atas

<script setup> mendukung await secara langsung di tingkat atas. Komponen tersebut menjadi setup asinkron dan kerangka kerja dapat menangguhkan rendering sampai promise selesai.

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

Suspense dengan setup Asinkron

Komponen yang menggunakan await di tingkat atas harus dibungkus dalam batas <Suspense> oleh induknya. Suspense menampilkan konten cadangan sampai setup asinkron selesai.

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

Praktik Terbaik

Beri nama komposabel dengan awalan use.
Panggil komposabel hanya di tingkat atas.
Kembalikan ref (atau reactive yang dibungkus dalam toRefs).
Utamakan VueUse untuk kebutuhan umum sebelum menulisnya sendiri.

Pemeriksaan Singkat

Pastikan Anda memahami komposabel.

Rangkuman

Anda telah belajar menggunakan komposabel:

Impor dan panggil komposabel di tingkat atas <script setup>.
Destrukturkan (dan ganti nama) hal-hal yang Anda perlukan.
VueUse menyediakan komposabel siap pakai seperti useLocalStorage dan useMouse.
await di tingkat atas membuat setup menjadi asinkron dan dipasangkan dengan <Suspense>.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Mengimpor dan Menggunakan Composable dalam script setup” gratis?

Ya — teks lengkap “Mengimpor dan Menggunakan Composable dalam script setup” 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 “Mengimpor dan Menggunakan Composable dalam script setup”?

Mengimpor composable, menggunakan composable VueUse pihak ketiga, mengatur impor. 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 “Mengimpor dan Menggunakan Composable dalam script setup” 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

Pengantar script setup
defineProps dan defineEmits
defineExpose dan useAttrs
Mengimpor dan Menggunakan Composable dalam script setup

← Kembali ke Vue Academy