0Pricing
Vue Academy · Pelajaran

Pengantar script setup

Cara dikompilasi menjadi setup(), impor otomatis, binding tingkat atas yang tersedia dalam templat.

Pengantar script setup adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 1 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 Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Composition API yang Lebih Rapi

<script setup> adalah singkatan sintaksis saat kompilasi untuk Composition API. Fitur ini menghilangkan kode tambahan sehingga komponen satu berkas Anda terbaca seperti JavaScript biasa dengan variabel reaktif.

Dari setup() ke script setup

Bentuk klasik memerlukan export default, fungsi setup(), dan pernyataan return yang ditulis secara eksplisit. Bandingkan dengan versi <script setup>.

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

Versi script setup

Dengan <script setup>, tidak ada objek pembungkus dan tidak ada pernyataan return. Variabel tingkat atas otomatis tersedia untuk templat.

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

Tidak Perlu Return Eksplisit

Kompilator memperlakukan setiap binding tingkat atas—variabel, fungsi, dan impor—sebagai sesuatu yang tersedia di templat. Anda menulis lebih sedikit dan tidak perlu khawatir lupa mengembalikan sesuatu.

Fungsi Tingkat Atas Juga Tersedia

Tentukan fungsi di tingkat atas dan ikat langsung ke templat. Anda tidak perlu mengembalikannya.

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

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

Komponen yang Diimpor Terdaftar Otomatis

Dalam API klasik, Anda harus mencantumkan komponen dalam opsi components. Dengan <script setup>, cukup impor komponen agar dapat digunakan di templat.

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

<template>
  <BaseButton />
</template>

Tetap Dikompilasi Menjadi setup()

Di balik layar, kompilator mengubah <script setup> menjadi fungsi setup() biasa. Anda mendapatkan perilaku dan performa yang sama, tetapi dengan penulisan yang lebih rapi.

Menambahkan TypeScript dengan lang ts

Aktifkan TypeScript dengan menambahkan lang="ts" ke tag tersebut. Setelah itu, Anda dapat menentukan tipe variabel, menggunakan generik pada makro kompilator, dan memperoleh inferensi tipe lengkap.

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

Makro Kompilator

Di dalam <script setup>, Anda mendapatkan makro kompilator khusus seperti defineProps, defineEmits, dan defineExpose. Makro tersebut tidak diimpor—kompilator mengenalinya. Anda akan mempelajari masing-masing makro dalam pelajaran berikutnya.

Menggabungkan dengan Blok script Biasa

Terkadang Anda memerlukan opsi yang berjalan sekali dalam cakupan modul, seperti nama komponen khusus. Anda dapat menambahkan blok <script> biasa di samping <script setup>.

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

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

Mengapa Tim Memilih script setup

  • Lebih sedikit kode tambahan—tanpa objek pembungkus atau return.
  • Pendaftaran komponen otomatis.
  • Performa saat dijalankan lebih baik berkat analisis saat kompilasi.
  • Dukungan TypeScript yang sangat baik.

Ini adalah gaya yang direkomendasikan untuk komponen satu berkas Vue 3.

Pemeriksaan Singkat

Pastikan Anda memahami script setup.

Rangkuman

Anda telah mempelajari dasar-dasar <script setup>:

  • Fitur ini merupakan singkatan saat kompilasi untuk setup().
  • Tidak ada return eksplisit—binding tingkat atas otomatis tersedia.
  • Komponen yang diimpor otomatis terdaftar.
  • Tambahkan lang="ts" untuk TypeScript.
  • Makro kompilator seperti defineProps tersedia tanpa impor.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pengantar script setup” gratis?

Ya — teks lengkap “Pengantar script setup” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Pengantar script setup”?

Cara dikompilasi menjadi setup(), impor otomatis, binding tingkat atas yang tersedia dalam templat. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Pengantar script setup” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Pengantar script setup
  2. defineProps dan defineEmits
  3. defineExpose dan useAttrs
  4. Mengimpor dan Menggunakan Composable dalam script setup
← Kembali ke Vue Academy