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

ฟังก์ชัน setup() และ script setup

เขียนตรรกะในฟังก์ชัน setup() หรือใช้รูปแบบย่อ เปิดเผยค่าให้ template และทำความเข้าใจ lifecycle hooks ใน Composition API

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

ฟังก์ชัน setup()

ใน Composition API ของ Vue 3 setup() เป็นตัวเลือกของคอมโพเนนต์ที่มาแทน data, methods, computed และ watch ฟังก์ชันนี้รับ props และบริบทของ setup เป็นอาร์กิวเมนต์ และคืนค่าสิ่งที่เทมเพลตต้องใช้

export default {
  props: { userId: String },
  setup(props, { emit, attrs, slots }) {
    const user = ref(null);
    onMounted(async () => {
      user.value = await fetchUser(props.userId);
    });
    return { user }; // must return what template uses
  }
};

<script setup> — ไวยากรณ์แบบย่อ

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

<script setup lang="ts">
import { ref, onMounted } from 'vue';

const count = ref(0);
// count is automatically available in template
</script>

ฮุกวงจรชีวิตใน setup()

ฮุกวงจรชีวิตของ Vue 3 เป็นฟังก์ชันที่นำเข้า ได้แก่ onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate และอื่น ๆ คุณสามารถเรียกใช้ฮุกเหล่านี้หลายครั้งเพื่อลงทะเบียนตัวจัดการหลายตัวได้

<script setup>
import { onMounted, onUnmounted } from 'vue';

let timer: ReturnType<typeof setInterval>;

onMounted(() => {
  timer = setInterval(tick, 1000);
  console.log('Component mounted');
});

onUnmounted(() => {
  clearInterval(timer); // cleanup
});
</script>

Props ของ setup()

ใน setup() props จะตอบสนองต่อการเปลี่ยนแปลง อย่าแยกโครงสร้าง props โดยตรง — ให้ใช้ toRefs(props) หรือเข้าถึงผ่าน props.x เพื่อคงการตอบสนองต่อการเปลี่ยนแปลงไว้

const props = defineProps<{ userId: string }>();

// Reactive access:
watch(() => props.userId, (id) => fetchUser(id));

// toRefs for destructuring:
const { userId } = toRefs(props);

defineExpose() — การเปิดเผยให้คอมโพเนนต์แม่

โดยค่าเริ่มต้น คอมโพเนนต์