Vue Academy · Pelajaran

Fungsi setup() dan Variabel Reaktif

Titik masuk setup(), ref() untuk nilai primitif, reactive() untuk objek, mengembalikan nilai.

Fungsi setup() dan Variabel Reaktif adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.

Titik Masuk setup()

API Komposisi berada di dalam opsi komponen khusus yang disebut setup(). Fungsi ini dijalankan sekali, sebelum komponen dibuat, dan menjadi tempat Anda mendeklarasikan state reaktif serta fungsi.

Apa pun yang Anda return dari setup() akan tersedia di templat.

Membuat State Reaktif dengan ref

ref() membungkus satu nilai (angka, string, boolean, atau bahkan objek) ke dalam wadah reaktif. Nilai sebenarnya berada pada properti .value.

import { ref } from 'vue'

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

Membuat Objek Reaktif dengan reactive

reactive() menerima objek biasa dan mengembalikan proksi yang reaktif secara mendalam. Anda mengakses propertinya secara langsung — tidak ada .value.

import { reactive } from 'vue'

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

Mengembalikan State ke Templat

Semua yang dikembalikan dari setup() sebagai objek akan menjadi pengikatan templat. Di sini, count dan user sama-sama ditampilkan.

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

Membuka Bungkus Otomatis di Templat

Dalam JavaScript, Anda menulis count.value. Di templat, Anda cukup menulis count. Vue secara otomatis membuka bungkus ref tingkat teratas, sehingga Anda tidak perlu mengetikkan .value di templat.

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

Menambahkan Fungsi

Fungsi yang didefinisikan dalam setup() dapat membaca dan mengubah state reaktif. Ingat: di dalam JavaScript, Anda tetap menggunakan .value untuk ref.

import { ref } from 'vue'

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

Menghubungkannya di Templat

Kembalikan fungsi tersebut dan ikat ke sebuah peristiwa. Saat tombol diklik, increment dipanggil, ref diubah, lalu Vue merender ulang.

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

Kata Kunci this Tidak Diperlukan

Di dalam setup(), tidak ada this. Anda bekerja langsung dengan variabel yang dideklarasikan. Hal ini membuat kode lebih mudah dipahami dan lebih sesuai untuk TypeScript.

Mencoba menggunakan this dalam setup() tidak akan memberikan Anda instans komponen.

setup Berjalan Sebelum Pembuatan

setup() dijalankan sangat awal — sebelum created dan sebelum instans komponen selesai disiapkan. Itulah sebabnya this tidak tersedia dan Anda belum dapat mengakses DOM di sini.

Argumen setup(): props dan context

setup(props, context) menerima props yang telah diselesaikan sebagai argumen pertama dan objek context sebagai argumen kedua. Context menyediakan attrs, slots, emit, dan expose.

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

Komponen Mini Lengkap

Berikut semuanya secara lengkap: sebuah ref, objek reaktif, fungsi, dan pengikatan yang dikembalikan.

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 }
  }
}

Uji Cepat

Pastikan Anda memahami setup() dan variabel reaktif.

Rangkuman

Anda telah mempelajari dasar-dasar API Komposisi:

setup() berjalan sekali sebelum pembuatan dan mengembalikan pengikatan templat.
ref() membungkus sebuah nilai — gunakan .value dalam JS.
reactive() membungkus sebuah objek — akses propertinya secara langsung.
Templat membuka bungkus ref secara otomatis, sehingga Anda tidak perlu menulis .value di sana.
Tidak ada this di dalam setup().

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Fungsi setup() dan Variabel Reaktif” gratis?

Ya — teks lengkap “Fungsi setup() dan Variabel Reaktif” 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 “Fungsi setup() dan Variabel Reaktif”?

Titik masuk setup(), ref() untuk nilai primitif, reactive() untuk objek, mengembalikan nilai. 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 2 dari 4.

Berapa lama pelajaran “Fungsi setup() dan Variabel Reaktif” 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

Mengapa Composition API?
Fungsi setup() dan Variabel Reaktif
ref vs reactive: Kapan Menggunakan Masing-Masing
Computed dan Watch dalam Composition API

← Kembali ke Vue Academy