Vue Academy · บทเรียน

เหตุใดจึงใช้ Composition API

ข้อจำกัดของ Options API ปัญหาการนำตรรกะกลับมาใช้ใหม่ และข้อดีของ Composition API

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

วิธีเขียน Vue สองรูปแบบ

Vue 3 มีรูปแบบการเขียนตรรกะของคอมโพเนนต์อยู่สองแบบ ได้แก่ API แบบตัวเลือก และ API แบบการประกอบ ทั้งสองแบบให้ผลลัพธ์สุดท้ายเหมือนกัน แต่จัดระเบียบโค้ดแตกต่างกันมาก

การเข้าใจข้อแลกเปลี่ยนเหล่านี้จะช่วยให้คุณเลือกเครื่องมือได้เหมาะสม และอ่านฐานโค้ดที่มีอยู่ได้อย่างมั่นใจ

API แบบตัวเลือกจัดระเบียบโค้ดอย่างไร

API แบบตัวเลือกแบ่งคอมโพเนนต์ออกเป็นส่วนที่กำหนดตายตัว ได้แก่ data, computed, methods, watch และฮุกวงจรชีวิต แต่ละส่วนของฟีเจอร์จะอยู่ในส่วนที่แตกต่างกัน

สำหรับฟีเจอร์เล็ก ๆ หนึ่งรายการ คุณอาจต้องแก้ไขบล็อกสี่ส่วนที่แยกกันของไฟล์

export default {
  data() {
    return { count: 0 }
  },
  computed: {
    doubled() { return this.count * 2 }
  },
  methods: {
    increment() { this.count++ }
  }
}

ปัญหา: ประเด็นต่าง ๆ กระจัดกระจาย

เมื่อคอมโพเนนต์มีขนาดใหญ่ขึ้น ตรรกะของประเด็นเดียว (เช่น กล่องค้นหา) จะกระจายอยู่ใน data, methods, computed และ watch คุณต้องเลื่อนขึ้นลงอยู่เสมอเพื่อไล่ตามฟีเจอร์เดียวกัน

สิ่งนี้เรียกว่า ปัญหาการกระจัดกระจาย

API แบบการประกอบ: จัดกลุ่มตามฟีเจอร์

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

คุณอ่านจากบนลงล่างและเห็นฟีเจอร์ทั้งหมดได้ในที่เดียว

import { ref, computed } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const doubled = computed(() => count.value * 2)
    function increment() { count.value++ }
    return { count, doubled, increment }
  }
}

เปรียบเทียบกัน

สังเกตว่าตัวอย่างที่สองวาง count, ค่าอนุมาน doubled ของมัน และ increment ไว้ด้วยกัน ใน API แบบตัวเลือก โค้ดสามส่วนเดียวกันนี้อยู่ในสามส่วนที่แยกจากกัน

API แบบตัวเลือก: จัดระเบียบตาม ประเภทตัวเลือก
API แบบการประกอบ: จัดระเบียบตาม ประเด็นเชิงตรรกะ

การใช้ตรรกะซ้ำ: มิกซ์อิน (วิธีแบบเดิม)

ก่อนมี API แบบการประกอบ เครื่องมือหลักสำหรับใช้ตรรกะซ้ำคือ มิกซ์อิน มิกซ์อินจะผสานตัวเลือกของตัวเองเข้ากับคอมโพเนนต์

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

const counterMixin = {
  data() { return { count: 0 } },
  methods: { increment() { this.count++ } }
}

export default {
  mixins: [counterMixin]
  // Where did count come from? Not obvious.
}

การใช้ตรรกะซ้ำ: คอมโพสิเบิล (วิธีแบบใหม่)

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

ไม่มีการผสานแบบลึกลับ และไม่มีชื่อชนกันที่ซ่อนอยู่

import { ref } from 'vue'

export function useCounter() {
  const count = ref(0)
  function increment() { count.value++ }
  return { count, increment }
}

การใช้คอมโพสิเบิล

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

import { useCounter } from './useCounter'

export default {
  setup() {
    const { count, increment } = useCounter()
    return { count, increment }
  }
}

เหตุผลที่คอมโพสิเบิลดีกว่ามิกซ์อิน

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

TypeScript และเครื่องมือที่ดีกว่า

เนื่องจาก API แบบการประกอบสร้างขึ้นจากฟังก์ชันและตัวแปรทั่วไป TypeScript จึงอนุมานชนิดข้อมูลได้โดยไม่ต้องใช้เครื่องมือเฉพาะ ไม่มี this ที่ต้องคอยดูแลชนิดข้อมูลซึ่งเขียนขึ้นเอง และเครื่องมือแก้ไขโค้ดก็แสดงการเติมโค้ดอัตโนมัติได้อย่างแม่นยำ

ควรใช้แบบใดเมื่อไร

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

โค้ด Vue 3 ใหม่โดยทั่วไปนิยมใช้ API แบบการประกอบ โดยเฉพาะเมื่อใช้ <script setup> ซึ่งคุณจะได้เรียนรู้ในเร็ว ๆ นี้

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

ทดสอบสิ่งที่คุณเรียนรู้เกี่ยวกับเหตุผลที่มี API แบบการประกอบ

สรุปทบทวน

ในบทเรียนนี้ คุณได้เรียนรู้ว่า:

API แบบตัวเลือกจัดระเบียบโค้ดตามประเภทตัวเลือก ทำให้ฟีเจอร์หนึ่งกระจายไปตามส่วนต่าง ๆ
API แบบการประกอบจัดกลุ่มโค้ดตามประเด็นเชิงตรรกะ
มิกซ์อินช่วยใช้ตรรกะซ้ำ แต่ทำให้ชื่อชนกันและแหล่งที่มาถูกซ่อนไว้
คอมโพสิเบิลเป็นฟังก์ชันทั่วไปที่ส่งคืน state แบบรีแอกทีฟ — ระบุแหล่งที่มาได้ชัดเจน ไม่มีชื่อชนกัน และนำมาประกอบต่อกันได้

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

บทเรียน “เหตุใดจึงใช้ Composition API” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “เหตุใดจึงใช้ Composition API”

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

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

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

บทเรียน “เหตุใดจึงใช้ Composition API” ใช้เวลานานแค่ไหน

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

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

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

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

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