0Pricing
Vue Academy · Pelajaran

ref vs reactive: Kapan Menggunakan Masing-Masing

Akses ref.value, penguraian reactive dalam templat, toRefs(), toRef() untuk destrukturisasi.

ref vs reactive: Kapan Menggunakan Masing-Masing adalah pelajaran Vue 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 Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Dua Alat Reaktivitas

Vue menawarkan dua cara utama untuk membuat state reaktif: ref() dan reactive(). Keduanya memiliki fungsi yang tumpang tindih, tetapi masing-masing lebih cocok untuk situasi tertentu. Mengetahui kapan harus memilih yang mana membantu menjaga kode tetap bersih.

ref Berfungsi dengan Nilai Apa Pun

ref() dapat membungkus apa pun: angka, string, boolean, larik, atau objek. Nilainya berada pada .value dalam JavaScript.

import { ref } from 'vue'

const count = ref(0)
const name = ref('Alice')
const isOpen = ref(false)

count.value++
name.value = 'Bob'

ref Membuka Bungkus Otomatis di Templat

Meskipun Anda harus menulis .value dalam JavaScript, templat secara otomatis membuka bungkus ref tingkat teratas. Jadi, {{ count }} langsung berfungsi.

<!-- template -->
<p>{{ count }} - {{ name }}</p>

reactive Digunakan untuk Objek

reactive() hanya menerima objek (termasuk larik dan peta). Fungsi ini mengembalikan proksi yang reaktif secara mendalam dan Anda mengakses propertinya secara langsung — tanpa .value.

import { reactive } from 'vue'

const state = reactive({
  name: 'Alice',
  age: 30,
  hobbies: ['reading']
})

state.age = 31
state.hobbies.push('coding')

reactive Bersifat Reaktif Secara Mendalam

Objek dan larik bersarang di dalam objek reactive juga bersifat reaktif. Mengubah properti bersarang akan memicu pembaruan tanpa pekerjaan tambahan.

const state = reactive({ profile: { city: 'Paris' } })
state.profile.city = 'Berlin' // reactive!

Batasan reactive: Destrukturisasi Merusaknya

Jika Anda melakukan destrukturisasi pada objek reactive, variabel yang diambil menjadi nilai biasa dan kehilangan reaktivitas. Inilah jebakan paling umum.

const state = reactive({ name: 'Alice' })
let { name } = state
name = 'Bob'
// state.name is still 'Alice' - reactivity lost!

Solusinya: toRefs untuk Destrukturisasi yang Aman

toRefs() mengubah setiap properti objek reaktif menjadi ref. Kini Anda dapat melakukan destrukturisasi dan mempertahankan reaktivitas, karena setiap bagian merupakan ref yang tetap terhubung ke sumbernya.

import { reactive, toRefs } from 'vue'

const state = reactive({ name: 'Alice', age: 30 })
const { name, age } = toRefs(state)
name.value = 'Bob' // state.name is now 'Bob'

toRef untuk Satu Properti

Jika Anda hanya memerlukan satu properti sebagai ref, gunakan toRef(state, 'key'). Properti tersebut tetap tersinkronisasi dua arah dengan objek sumber.

import { reactive, toRef } from 'vue'

const state = reactive({ age: 30 })
const age = toRef(state, 'age')
age.value = 31 // state.age is now 31

Pedoman Praktis

  • Gunakan ref() untuk nilai primitif (angka, string, boolean) dan nilai yang berdiri sendiri.
  • Gunakan reactive() untuk sekelompok properti terkait yang membentuk satu objek.
  • Saat mengembalikan objek reaktif dari komposabel, bungkus objek tersebut dengan toRefs().

ref Juga Dapat Menyimpan Objek

Anda tidak diwajibkan memilih reactive untuk objek. ref yang menyimpan objek juga bersifat reaktif secara mendalam — Anda hanya perlu mengaksesnya melalui .value. Banyak tim menggunakan ref di mana-mana demi konsistensi.

const user = ref({ name: 'Alice' })
user.value.name = 'Bob' // reactive
user.value = { name: 'Carol' } // replace whole object

Tabel Ringkasan

  • ref: nilai apa pun, memerlukan .value dalam JS, membuka bungkus secara otomatis di templat, dan dapat diganti seluruhnya.
  • reactive: hanya untuk objek, tanpa .value, reaktif secara mendalam, tetapi rusak saat didestrukturisasi dan tidak dapat diganti.
  • toRefs: jembatan yang membuat properti reaktif dapat didestrukturisasi.

Uji Cepat

Pilih alat yang tepat.

Rangkuman

Hal-hal penting:

  • ref() membungkus nilai apa pun dan memerlukan .value dalam JavaScript.
  • reactive() digunakan untuk objek dan bersifat reaktif secara mendalam, tetapi rusak saat didestrukturisasi.
  • toRefs() memungkinkan Anda melakukan destrukturisasi objek reaktif dengan aman.
  • Gunakan ref untuk nilai primitif dan reactive untuk state objek yang dikelompokkan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “ref vs reactive: Kapan Menggunakan Masing-Masing” gratis?

Ya — teks lengkap “ref vs reactive: Kapan Menggunakan Masing-Masing” 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 “ref vs reactive: Kapan Menggunakan Masing-Masing”?

Akses ref.value, penguraian reactive dalam templat, toRefs(), toRef() untuk destrukturisasi. 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 3 dari 4.

Berapa lama pelajaran “ref vs reactive: Kapan Menggunakan Masing-Masing” 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. Mengapa Composition API?
  2. Fungsi setup() dan Variabel Reaktif
  3. ref vs reactive: Kapan Menggunakan Masing-Masing
  4. Computed dan Watch dalam Composition API
← Kembali ke Vue Academy