Vue Academy · บทเรียน

การนำเข้าและใช้ Composables ใน script setup

การนำเข้า Composables การใช้ Composables ของ VueUse จากบุคคลที่สาม และการจัดระเบียบการนำเข้า

การนำเข้าและใช้ Composables ใน script setup เป็นบทเรียน Vue Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Vue Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

คอมโพสิเบิลและ script setup

คอมโพสิเบิลคือฟังก์ชันที่รวมตรรกะแบบตอบสนองไว้เพื่อให้เรียกใช้ซ้ำได้ เมื่อใช้ <script setup> การเรียกใช้คอมโพสิเบิลก็ทำได้ง่าย ๆ เพียงนำเข้าแล้วเรียกใช้ที่ระดับบนสุด

นำเข้าที่ระดับบนสุด

เรียกใช้คอมโพสิเบิลที่ระดับบนสุดของ <script setup> เสมอ อย่าเรียกใช้ภายในเงื่อนไข ลูป หรือฟังก์ชันซ้อน วิธีนี้ทำให้ Vue ลงทะเบียนระบบตอบสนองและฮุกวงจรชีวิตได้อย่างถูกต้อง

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

เหตุใดระดับบนสุดจึงสำคัญ

คอมโพสิเบิลมักลงทะเบียนฮุกวงจรชีวิต เช่น onMounted หรือตั้งค่าตัวเฝ้าดู ฮุกเหล่านี้ต้องทำงานระหว่างการตั้งค่าคอมโพเนนต์ ซึ่งจะเกิดขึ้นก็ต่อเมื่อคุณเรียกใช้คอมโพสิเบิลแบบพร้อมกันที่ระดับบนสุด

แยกเฉพาะสิ่งที่ต้องใช้

คอมโพสิเบิลจะส่งคืนออบเจ็กต์ที่มีค่าตอบสนองและฟังก์ชันต่าง ๆ ให้แยกเฉพาะสิ่งที่คอมโพเนนต์ใช้ และเปลี่ยนชื่อเพื่อหลีกเลี่ยงการชนกันเมื่อเรียกใช้คอมโพสิเบิลเดียวกันสองครั้ง

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

ทำความรู้จัก VueUse

VueUse เป็นไลบรารีคอมโพสิเบิลสำเร็จรูปยอดนิยม แทนที่จะเขียนตรรกะทั่วไปด้วยตนเอง ให้นำเข้าคอมโพสิเบิลที่ผ่านการทดสอบแล้ว ติดตั้งเพียงครั้งเดียว แล้วนำเข้าสิ่งที่ต้องการใช้

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

useLocalStorage ในการใช้งานจริง

useLocalStorage ส่งคืน ref ที่ซิงก์กับ localStorage เมื่อเปลี่ยน ref พื้นที่จัดเก็บของเบราว์เซอร์จะอัปเดต และเมื่อโหลดหน้าใหม่ ค่าเดิมจะยังคงอยู่

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

useMouse สำหรับพิกัดแบบตอบสนอง

useMouse ติดตามตำแหน่งตัวชี้เมาส์เป็น ref แบบตอบสนอง โดยเพิ่มและนำตัวรับฟังเหตุการณ์ออกให้คุณ คุณจึงไม่ต้องจัดการการล้างข้อมูลด้วยตนเอง

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

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

คอมโพสิเบิลประกอบกันได้

คอมโพสิเบิลหนึ่งรายการสามารถเรียกใช้คอมโพสิเบิลรายการอื่นได้ การแบ่งชั้นเช่นนี้คือหัวใจของ Composition API คุณสร้างส่วนเล็ก ๆ แล้วนำมาประกอบเป็นความสามารถที่ใหญ่ขึ้น

import { useMouse } from '@vueuse/core'

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

await ระดับบนสุด

<script setup> รองรับ await โดยตรงที่ระดับบนสุด คอมโพเนนต์จะกลายเป็นการตั้งค่าแบบอะซิงโครนัส และเฟรมเวิร์กสามารถหยุดการแสดงผลไว้จนกว่าสัญญาจะเสร็จสมบูรณ์

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

Suspense กับการตั้งค่าแบบอะซิงโครนัส

คอมโพเนนต์ที่ใช้ await ระดับบนสุดต้องถูกครอบด้วยขอบเขต <Suspense> โดยคอมโพเนนต์แม่ Suspense จะแสดงเนื้อหาสำรองจนกว่าการตั้งค่าแบบอะซิงโครนัสจะเสร็จสิ้น

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

แนวทางปฏิบัติที่ดี

ตั้งชื่อคอมโพสิเบิลโดยขึ้นต้นด้วย use
เรียกใช้ที่ระดับบนสุดเท่านั้น
ส่งคืน ref หรือ reactive ที่ครอบด้วย toRefs
เลือกใช้ VueUse สำหรับความต้องการทั่วไปก่อนเขียนขึ้นเอง

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ตรวจสอบความเข้าใจเกี่ยวกับคอมโพสิเบิล

ทบทวน

คุณได้เรียนรู้วิธีใช้คอมโพสิเบิลแล้ว:

นำเข้าและเรียกใช้ที่ ระดับบนสุด ของ <script setup>
แยกเฉพาะสิ่งที่ต้องใช้ และเปลี่ยนชื่อได้ตามต้องการ
VueUse มีคอมโพสิเบิลสำเร็จรูป เช่น useLocalStorage และ useMouse
await ระดับบนสุดทำให้การตั้งค่าเป็นแบบอะซิงโครนัส และใช้คู่กับ <Suspense>

คำถามที่พบบ่อย

บทเรียน “การนำเข้าและใช้ Composables ใน script setup” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การนำเข้าและใช้ Composables ใน script setup” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Vue Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Vue Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การนำเข้าและใช้ Composables ใน script setup”

การนำเข้า Composables การใช้ Composables ของ VueUse จากบุคคลที่สาม และการจัดระเบียบการนำเข้า คุณปฏิบัติ Vue Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Vue Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Vue Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “การนำเข้าและใช้ Composables ใน script setup” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Vue Academy นี้ได้ไหม

ได้ บทเรียน Vue Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

บทนำสู่ script setup
defineProps และ defineEmits
defineExpose และ useAttrs
การนำเข้าและใช้ Composables ใน script setup

← กลับไปที่ Vue Academy