0Pricing
Frontend Academy · Pelajaran

Fungsi setup() dan script setup

Tulis logika dalam fungsi setup() atau gunakan sintaks sederhana , tampilkan nilai ke template, dan pahami hook siklus hidup dalam Composition API.

Fungsi setup() dan script setup adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Fungsi setup()

Dalam Composition API Vue 3, setup() adalah opsi komponen yang menggantikan data, metode, computed, dan watch. Fungsi ini menerima props dan konteks setup sebagai argumen, lalu mengembalikan hal-hal yang diperlukan template.

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> — Sintaks Ringkas

<script setup> adalah sintaks ringkas pada waktu kompilasi untuk setup(). Semua yang dideklarasikan di tingkat teratas otomatis tersedia di template. Anda tidak perlu menulis pernyataan return.

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

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

Hook Siklus Hidup dalam setup()

Hook siklus hidup Vue 3 adalah fungsi yang diimpor: onMounted, onUpdated, onUnmounted, onBeforeMount, onBeforeUpdate, dan sebagainya. Hook tersebut dapat dipanggil beberapa kali untuk mendaftarkan beberapa fungsi penanganan.

<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()

Dalam setup(), props bersifat reaktif. Jangan langsung mendestrukturisasi props—gunakan toRefs(props) atau akses melalui props.x agar reaktivitas tetap terjaga.

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

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

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

defineExpose() — Mengekspos ke Komponen Induk

Secara default, komponen