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

บทนำสู่ script setup

วิธีที่ คอมไพล์เป็น setup() การนำเข้าอัตโนมัติ และการทำให้การผูกค่าระดับบนสุดพร้อมใช้ในเทมเพลต

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

Composition API ที่สะอาดยิ่งขึ้น

<script setup> คือไวยากรณ์ย่อของ Composition API ที่ทำงานในเวลาคอมไพล์ โดยลดโค้ดส่วนเกิน ทำให้คอมโพเนนต์แบบไฟล์เดียวของคุณอ่านได้เหมือน JavaScript ทั่วไปที่มีตัวแปรแบบตอบสนอง

จาก setup() สู่ script setup

รูปแบบดั้งเดิมต้องมี export default ฟังก์ชัน setup() และคำสั่ง return อย่างชัดเจน ลองเปรียบเทียบกับเวอร์ชัน <script setup>

<!-- classic -->
<script>
import { ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    return { count }
  }
}
</script>

เวอร์ชัน script setup

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

<!-- script setup -->
<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

ไม่จำเป็นต้องใช้คำสั่ง Return อย่างชัดเจน

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

ฟังก์ชันระดับบนสุดก็พร้อมใช้งานเช่นกัน

กำหนดฟังก์ชันที่ระดับบนสุด แล้วผูกฟังก์ชันนั้นกับแม่แบบโดยตรง ไม่จำเป็นต้องส่งฟังก์ชันกลับด้วย return

<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() { count.value++ }
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>

คอมโพเนนต์ที่นำเข้าจะลงทะเบียนโดยอัตโนมัติ

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

<script setup>
import BaseButton from './BaseButton.vue'
</script>

<template>
  <BaseButton />
</template>

เบื้องหลังก็ยังคอมไพล์เป็น setup()

เบื้องหลัง คอมไพเลอร์จะแปลง <script setup> ให้เป็นฟังก์ชัน setup() ปกติ คุณจึงได้พฤติกรรมและประสิทธิภาพเหมือนเดิม เพียงเขียนโค้ดได้สะอาดขึ้น

เพิ่ม TypeScript ด้วย lang ts

เปิดใช้ TypeScript โดยเพิ่ม lang="ts" ให้กับแท็ก จากนั้นคุณจะกำหนดชนิดให้ตัวแปร ใช้ชนิดทั่วไปกับมาโครของคอมไพเลอร์ และรับการอนุมานชนิดได้อย่างสมบูรณ์

<script setup lang="ts">
import { ref } from 'vue'
const count = ref<number>(0)
</script>

มาโครของคอมไพเลอร์

ภายใน <script setup> คุณจะได้ใช้มาโครพิเศษของคอมไพเลอร์ เช่น defineProps, defineEmits และ defineExpose มาโครเหล่านี้ไม่ต้องนำเข้า เพราะคอมไพเลอร์รู้จักอยู่แล้ว คุณจะได้เรียนรู้แต่ละรายการในบทเรียนถัดไป

ใช้ร่วมกับบล็อกสคริปต์ปกติ

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

<script>
export default { name: 'MyComponent' }
</script>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

เหตุผลที่ทีมต่าง ๆ เลือกใช้ script setup

  • มีโค้ดส่วนเกินน้อยลง ไม่ต้องใช้ออบเจ็กต์ตัวห่อหุ้มหรือ return
  • ลงทะเบียนคอมโพเนนต์โดยอัตโนมัติ
  • ประสิทธิภาพขณะทำงานดีขึ้นจากการวิเคราะห์ในเวลาคอมไพล์
  • รองรับ TypeScript ได้เป็นอย่างดี

นี่คือรูปแบบที่แนะนำสำหรับคอมโพเนนต์แบบไฟล์เดียวของ Vue 3

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

ตรวจสอบความเข้าใจเกี่ยวกับ script setup ของคุณ

ทบทวน

คุณได้เรียนรู้พื้นฐานสำคัญของ <script setup> แล้ว:

  • เป็นไวยากรณ์ย่อในเวลาคอมไพล์ของ setup()
  • ไม่ต้องใช้ return อย่างชัดเจน การประกาศระดับบนสุดจะพร้อมใช้งานโดยอัตโนมัติ
  • คอมโพเนนต์ที่นำเข้าจะลงทะเบียนโดยอัตโนมัติ
  • เพิ่ม lang="ts" เพื่อใช้ TypeScript
  • มาโครของคอมไพเลอร์ เช่น defineProps พร้อมใช้งานโดยไม่ต้องนำเข้า

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

บทเรียน “บทนำสู่ script setup” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “บทนำสู่ script setup”

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

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

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

บทเรียน “บทนำสู่ script setup” ใช้เวลานานแค่ไหน

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

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

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

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

  1. บทนำสู่ script setup
  2. defineProps และ defineEmits
  3. defineExpose และ useAttrs
  4. การนำเข้าและใช้ Composables ใน script setup
← กลับไปที่ Vue Academy