Vue Academy · Pelajaran

Mengimport dan Menggunakan Composable dalam script setup

Mengimport composable, menggunakan composable VueUse pihak ketiga, menyusun import.

Pelajaran 4 daripada 413 langkah

Mengimport dan Menggunakan Composable dalam script setup ialah pelajaran Vue Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Vue Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Komposabel dan script setup

Komposabel ialah fungsi yang membungkus logik reaktif untuk digunakan semula. Dengan <script setup>, penggunaannya semudah mengimport dan memanggilnya pada peringkat atas.

Import pada Peringkat Atas

Sentiasa panggil komposabel pada peringkat atas <script setup> — bukan di dalam syarat, gelung atau fungsi bersarang. Ini memastikan Vue mendaftarkan reaktiviti dan cangkuk kitar hayatnya dengan betul.

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

Mengapa Peringkat Atas Penting

Komposabel sering mendaftarkan cangkuk kitar hayat seperti onMounted atau menyediakan pemerhati. Semua ini mesti berjalan semasa persediaan komponen, yang hanya berlaku jika anda memanggil komposabel secara segerak pada peringkat atas.

Nyahstrukturkan Perkara yang Diperlukan

Komposabel mengembalikan objek yang mengandungi nilai dan fungsi reaktif. Nyahstrukturkan hanya perkara yang digunakan oleh komponen; namakan semula untuk mengelakkan pertembungan apabila memanggil komposabel yang sama dua kali.

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

Kenali VueUse

VueUse ialah pustaka komposabel sedia guna yang popular. Daripada menulis sendiri logik biasa, import komposabel yang telah diuji. Pasangnya sekali dan import perkara yang anda perlukan.

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

useLocalStorage dalam Tindakan

useLocalStorage mengembalikan ref yang disegerakkan dengan localStorage. Ubah ref tersebut dan storan pelayar akan dikemas kini; muat semula halaman dan nilainya kekal.

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

useMouse untuk Koordinat Reaktif

useMouse menjejaki kedudukan penuding sebagai ref reaktif. Ia menambah dan membuang pendengar peristiwa untuk anda, jadi anda tidak perlu mengurus pembersihan secara manual.

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

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

Komposabel Menggubah

Komposabel boleh memanggil komposabel lain. Pelapisan ini ialah teras API Composition — bina bahagian kecil dan gabungkannya menjadi ciri 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 Peringkat Atas

<script setup> menyokong await secara terus pada peringkat atas. Komponen menjadi persediaan tak segerak dan rangka kerja boleh menangguhkan pemaparan sehingga janji itu diselesaikan.

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

Suspense dengan Persediaan Tak Segerak

Komponen yang menggunakan await peringkat atas mesti dibalut dalam sempadan <Suspense> oleh induknya. Suspense memaparkan kandungan sandaran sehingga persediaan tak segerak selesai.

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

Amalan Terbaik

Namakan komposabel dengan awalan use.
Panggilnya hanya pada peringkat atas.
Pulangkan ref (atau reactive yang dibalut dalam toRefs).
Utamakan VueUse untuk keperluan biasa sebelum menulis komposabel sendiri.

Semakan Ringkas

Sahkan pemahaman anda tentang komposabel.

Jawab dalam pelajaran interaktif

Ringkasan

Anda mempelajari cara menggunakan komposabel:

Import dan panggilnya pada peringkat atas <script setup>.
Nyahstrukturkan (dan namakan semula) perkara yang diperlukan.
VueUse menawarkan komposabel sedia guna seperti useLocalStorage dan useMouse.
await peringkat atas menjadikan persediaan tak segerak dan digunakan bersama <Suspense>.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 42
Pelajaran: 156

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Mengimport dan Menggunakan Composable dalam script setup” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Vue Academy, termasuk “Mengimport dan Menggunakan Composable dalam script setup”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Mengimport dan Menggunakan Composable dalam script setup”?

Mengimport composable, menggunakan composable VueUse pihak ketiga, menyusun import. Anda berlatih Vue Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Vue Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Vue Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.

Berapa lamakah pelajaran “Mengimport dan Menggunakan Composable dalam script setup” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Pengenalan kepada script setup
defineProps dan defineEmits
defineExpose dan useAttrs
Mengimport dan Menggunakan Composable dalam script setup

← Kembali ke Vue Academy