Vue Academy · บทเรียน

ฮุกวงจรชีวิตและการดึงข้อมูล

ดึงข้อมูลในช่วงเวลาที่เหมาะสมของวงจรชีวิตคอมโพเนนต์

บทเรียน 2 จาก 313 ขั้นตอน

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

เมื่อใดควรดึงข้อมูล

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

ฮุกหลังสร้าง

ฮุก created ทำงานหลังจากตั้งค่าข้อมูลแบบรีแอกทีฟแล้ว แต่ก่อนที่คอมโพเนนต์จะถูกแทรกลงใน DOM จุดนี้เหมาะสำหรับเริ่มดึงข้อมูล เพราะระบบรีแอกทีฟพร้อมใช้งานแล้ว

export default {
  data() {
    return { posts: [] }
  },
  created() {
    this.fetchPosts()
  }
}

ฮุกหลังเมานต์

ฮุก mounted ทำงานหลังจากคอมโพเนนต์ถูกแทรกลงใน DOM ใช้ฮุกนี้เมื่อการดึงข้อมูลต้องเข้าถึงองค์ประกอบ DOM หรือไลบรารีภายนอกที่ต้องใช้องค์ประกอบที่เรนเดอร์แล้ว

export default {
  mounted() {
    this.fetchPosts()
    // template refs are now available here
  }
}

หลังสร้างเทียบกับหลังเมานต์

สำหรับการดึงข้อมูลโดยเฉพาะ ทั้งสองแบบใช้งานได้ created ทำงานเร็วกว่าเล็กน้อย คำขอจึงเริ่มเร็วขึ้น เลือก mounted เฉพาะเมื่อจำเป็นต้องใช้ DOM ที่เรนเดอร์แล้วจริง ๆ สำหรับการเรียก API ส่วนใหญ่ใช้แบบใดก็ได้

onMounted ใน API แบบองค์ประกอบ

ใน API แบบองค์ประกอบ ฮุกวงจรชีวิตคือฟังก์ชันที่นำเข้าและเรียกใช้ภายใน setup โดย onMounted เป็นรูปแบบเทียบเท่ากับ mounted

import { ref, onMounted } from "vue"
import { api } from "./api"

export default {
  setup() {
    const posts = ref([])
    onMounted(async () => {
      const res = await api.get("/posts")
      posts.value = res.data
    })
    return { posts }
  }
}

รูปแบบสถานะกำลังโหลด

คำขอเครือข่ายต้องใช้เวลา ติดตามแฟล็ก loading เพื่อแสดงตัวหมุนระหว่างรอข้อมูล และซ่อนตัวหมุนเมื่อเสร็จสิ้น

data() {
  return {
    posts: [],
    loading: false
  }
}

การสลับสถานะกำลังโหลด

กำหนด loading เป็น true ก่อนส่งคำขอ และเปลี่ยนกลับเป็น false หลังจากนั้นไม่ว่าผลลัพธ์จะเป็นอย่างไร

async fetchPosts() {
  this.loading = true
  try {
    const res = await api.get("/posts")
    this.posts = res.data
  } finally {
    this.loading = false
  }
}

การแสดงตัวบ่งชี้การโหลด

ในแม่แบบ ให้ตรวจสอบแฟล็กการโหลดเพื่อแสดงตัวหมุนหรือข้อความระหว่างที่ข้อมูลกำลังมา

<template>
  <p v-if="loading">Loading...</p>
  <ul v-else>
    <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
  </ul>
</template>

การจัดการผลลัพธ์ว่าง

เตรียมรับมือกับการตอบกลับที่ว่างไว้เสมอ แสดงข้อความที่เป็นมิตรเมื่อรายการที่ดึงมาไม่มีรายการใดเลย

<ul v-if="posts.length">
  <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
</ul>
<p v-else>No posts found.</p>

รูปแบบการโหลดของ API แบบองค์ประกอบ

รูปแบบการโหลดเดียวกันนี้นำไปใช้กับ API แบบองค์ประกอบที่มีรีฟได้อย่างเหมาะสม

const posts = ref([])
const loading = ref(false)

async function load() {
  loading.value = true
  try {
    posts.value = (await api.get("/posts")).data
  } finally {
    loading.value = false
  }
}

onMounted(load)

การแสดงข้อมูลที่ดึงมา

เมื่อข้อมูลอยู่ในสถานะแบบรีแอกทีฟแล้ว แม่แบบจะแสดงผลข้อมูลโดยอัตโนมัติ ผสานสถานะกำลังโหลด ข้อมูล และผลลัพธ์ว่างเข้าด้วยกันเพื่อประสบการณ์ผู้ใช้ที่ราบรื่น

<template>
  <section>
    <p v-if="loading">Loading...</p>
    <ul v-else-if="posts.length">
      <li v-for="p in posts" :key="p.id">{{ p.title }}</li>
    </ul>
    <p v-else>Nothing here yet.</p>
  </section>
</template>

ตรวจสอบความเข้าใจ

ทดสอบความเข้าใจเกี่ยวกับฮุกวงจรชีวิตและการดึงข้อมูล

ตอบคำถามในบทเรียนแบบโต้ตอบ

ทบทวน

ดึงข้อมูลใน created หรือ mounted (หรือ onMounted ใน API แบบองค์ประกอบ) ติดตามแฟล็ก loading ด้วย try/finally เพื่อให้ส่วนติดต่อผู้ใช้แสดงตัวหมุน แสดงข้อมูล และจัดการผลลัพธ์ว่างได้ ต่อไปคุณจะทำให้คำขอเหล่านี้ทำงานได้ทนทานขึ้นด้วยการจัดการข้อผิดพลาดและใช้อินเตอร์เซปเตอร์

เริ่มต้นได้ฟรี

เรียนรู้ HTML ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 42
บทเรียน: 156

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

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

บทเรียน “ฮุกวงจรชีวิตและการดึงข้อมูล” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “ฮุกวงจรชีวิตและการดึงข้อมูล”

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

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

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

บทเรียน “ฮุกวงจรชีวิตและการดึงข้อมูล” ใช้เวลานานแค่ไหน

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

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

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

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

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