0Pricing
Vue Academy · บทเรียน

ฟังก์ชัน setup() และตัวแปรรีแอกทีฟ

จุดเริ่มต้น setup() การใช้ ref() สำหรับค่าพื้นฐาน การใช้ reactive() สำหรับออบเจ็กต์ และการส่งคืนค่า

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

จุดเริ่มต้น setup()

API แบบการประกอบอยู่ภายในตัวเลือกพิเศษของคอมโพเนนต์ที่เรียกว่า setup() ฟังก์ชันนี้ทำงานหนึ่งครั้งก่อนสร้างคอมโพเนนต์ และเป็นตำแหน่งที่คุณประกาศ state แบบรีแอกทีฟกับฟังก์ชันต่าง ๆ

สิ่งใดก็ตามที่คุณ return จาก setup() จะพร้อมใช้งานในเทมเพลต

การสร้าง state แบบรีแอกทีฟด้วย ref

ref() จะห่อหุ้มค่าเดี่ยว (ตัวเลข สตริง บูลีน หรือแม้แต่อ็อบเจ็กต์) ไว้ในคอนเทนเนอร์แบบรีแอกทีฟ ค่าจริงจะอยู่ในคุณสมบัติ .value

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    console.log(count.value) // 0
    return { count }
  }
}

การสร้างอ็อบเจ็กต์แบบรีแอกทีฟด้วย reactive

reactive() รับอ็อบเจ็กต์ทั่วไปและส่งคืนพร็อกซีที่รีแอกทีฟอย่างลึก คุณเข้าถึงคุณสมบัติของมันได้โดยตรง โดยไม่มี .value

import { reactive } from 'vue'

export default {
  setup() {
    const user = reactive({ name: 'Alice', age: 30 })
    console.log(user.name) // Alice
    return { user }
  }
}

การส่งคืน state ไปยังเทมเพลต

ทุกสิ่งที่ส่งคืนจาก setup() ในรูปอ็อบเจ็กต์จะกลายเป็นการเชื่อมโยงข้อมูลในเทมเพลต ในที่นี้ทั้ง count และ user ถูกเปิดเผยให้ใช้งาน

export default {
  setup() {
    const count = ref(0)
    const user = reactive({ name: 'Alice' })
    return { count, user }
  }
}

การแกะค่าอัตโนมัติในเทมเพลต

ใน JavaScript คุณเขียน count.value แต่ในเทมเพลตคุณเขียนเพียง count Vue จะแกะ ref ระดับบนสุดให้อัตโนมัติ ดังนั้นคุณจึงไม่ต้องพิมพ์ .value ในเทมเพลต

<!-- template -->
<p>Count: {{ count }}</p>
<p>Name: {{ user.name }}</p>

การเพิ่มฟังก์ชัน

ฟังก์ชันที่กำหนดใน setup() สามารถอ่านและเปลี่ยน state แบบรีแอกทีฟได้ โปรดจำไว้ว่า ภายใน JavaScript คุณยังคงต้องใช้ .value สำหรับ ref

import { ref } from 'vue'

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

การเชื่อมต่อในเทมเพลต

ส่งคืนฟังก์ชันและเชื่อมโยงฟังก์ชันนั้นกับเหตุการณ์ เมื่อคลิกปุ่ม ระบบจะเรียกใช้ increment ซึ่งเปลี่ยนค่า ref แล้ว Vue จะเรนเดอร์ใหม่

<!-- template -->
<button @click="increment">Count is {{ count }}</button>

ไม่จำเป็นต้องใช้คีย์เวิร์ด this

ภายใน setup() จะไม่มี this คุณทำงานกับตัวแปรที่ประกาศไว้ได้โดยตรง ทำให้ทำความเข้าใจโค้ดได้ง่ายขึ้นและเป็นมิตรต่อ TypeScript มากขึ้น

การพยายามใช้ this ใน setup() จะไม่ทำให้คุณได้อินสแตนซ์ของคอมโพเนนต์

setup ทำงานก่อนการสร้าง

setup() ทำงานตั้งแต่ช่วงแรกมาก — ก่อน created และก่อนที่อินสแตนซ์ของคอมโพเนนต์จะเตรียมพร้อมอย่างสมบูรณ์ นั่นจึงเป็นเหตุผลที่ this ใช้งานไม่ได้ และเหตุผลที่คุณยังเข้าถึง DOM ในที่นี้ไม่ได้

อาร์กิวเมนต์ของ setup(): props และ context

setup(props, context) รับ props ที่ผ่านการแก้ไขเรียบร้อยแล้วเป็นอาร์กิวเมนต์ตัวแรก และรับอ็อบเจ็กต์ context เป็นตัวที่สอง context จะเปิดเผย attrs, slots, emit และ expose

export default {
  props: { title: String },
  setup(props, context) {
    console.log(props.title)
    context.emit('ready')
  }
}

คอมโพเนนต์ขนาดเล็กฉบับสมบูรณ์

ต่อไปนี้คือทุกอย่างที่นำมารวมกัน: ref อ็อบเจ็กต์แบบรีแอกทีฟ ฟังก์ชัน และการเชื่อมโยงที่ส่งคืน

import { ref, reactive } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const user = reactive({ name: 'Alice' })
    function increment() { count.value++ }
    return { count, user, increment }
  }
}

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

ตรวจสอบให้แน่ใจว่าคุณเข้าใจ setup() และตัวแปรแบบรีแอกทีฟ

สรุปทบทวน

คุณได้เรียนรู้พื้นฐานของ API แบบการประกอบแล้ว:

  • setup() ทำงานหนึ่งครั้งก่อนการสร้าง และส่งคืนการเชื่อมโยงข้อมูลสำหรับเทมเพลต
  • ref() ห่อหุ้มค่า — ใช้ .value ใน JS
  • reactive() ห่อหุ้มอ็อบเจ็กต์ — เข้าถึงคุณสมบัติได้โดยตรง
  • เทมเพลตจะแกะ ref โดยอัตโนมัติ ดังนั้นคุณไม่ต้องใช้ .value ในเทมเพลต
  • ภายใน setup() จะไม่มี this

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

บทเรียน “ฟังก์ชัน setup() และตัวแปรรีแอกทีฟ” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “ฟังก์ชัน setup() และตัวแปรรีแอกทีฟ”

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

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

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

บทเรียน “ฟังก์ชัน setup() และตัวแปรรีแอกทีฟ” ใช้เวลานานแค่ไหน

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

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

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

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

  1. เหตุใดจึงใช้ Composition API
  2. ฟังก์ชัน setup() และตัวแปรรีแอกทีฟ
  3. ref กับ reactive: ควรใช้แบบใด
  4. Computed และ Watch ใน Composition API
← กลับไปที่ Vue Academy