Frontend Academy · Pelajaran

ref() dan reactive()

Buat nilai primitif reaktif dengan ref(), bungkus object dengan reactive(), lalu pahami kapan masing-masing digunakan dan cara mengakses nilai ref melalui .value.

Pelajaran 1 dari 413 langkah

ref() dan reactive() adalah pelajaran Frontend 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 Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Reaktivitas dalam Vue 3

API Komposisi Vue 3 menggunakan primitif reaktif untuk melacak status. Dua fungsi utama: ref() untuk nilai primitif dan reactive() untuk objek. Perubahan pada keduanya secara otomatis memperbarui UI.

ref() untuk Nilai Primitif

ref(value) membungkus nilai dalam wadah reaktif. Akses dan ubah nilainya melalui .value dalam skrip. Dalam templat, Vue otomatis membuka bungkus ref—tidak perlu menggunakan .value.

<script setup>
import { ref } from 'vue';

const count = ref(0);
const name  = ref('Alice');

function increment() {
  count.value++; // .value in script
}
</script>

<template>
  <p>{{ count }}</p>  <!-- no .value in template -->
  <button @click="increment">+</button>
</template>

reactive() untuk Objek

reactive(object) mengembalikan proksi objek yang sepenuhnya reaktif. Akses properti secara langsung—tidak perlu menggunakan .value di mana pun.

<script setup>
import { reactive } from 'vue';

const form = reactive({
  email: '',
  password: '',
  rememberMe: false
});

// Mutate directly:
form.email = 'user@example.com';
</script>

<template>
  <input v-model="form.email">
</template>

ref vs reactive — Kapan Menggunakan Masing-Masing

Gunakan ref() untuk: nilai primitif (string, angka, boolean), nilai yang dapat bernilai null, dan nilai yang dikembalikan dari composable (lebih mudah didestrukturisasi). Gunakan reactive() untuk: data terkait yang menjadi satu kesatuan dalam satu objek.

Perangkap Destrukturisasi reactive()

Destrukturisasi objek reaktif menghilangkan reaktivitas karena properti yang diekstrak menjadi nilai biasa, bukan ref reaktif.

const state = reactive({ count: 0 });
const { count } = state; // NOT reactive
count++; // doesn't update Vue's tracking

// Fix: use toRefs() to destructure reactively:
import { toRefs } from 'vue';
const { count } = toRefs(state); // count is now a ref
count.value++;

toRef dan toRefs

toRef(obj, 'key') membuat ref yang terhubung ke satu properti. toRefs(obj) mengubah semua properti objek reaktif menjadi ref individual yang saling terhubung—aman untuk didestrukturisasi.

import { toRefs } from 'vue';

const user = reactive({ name: 'Alice', age: 30 });
const { name, age } = toRefs(user);
// name and age are refs, still linked to user
name.value = 'Bob'; // user.name also becomes 'Bob'

ref() untuk Elemen DOM

Gunakan ref(null) dengan atribut ref yang sesuai dalam templat untuk mendapatkan referensi reaktif ke elemen DOM atau instans komponen anak.

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

const inputEl = ref<HTMLInputElement | null>(null);

onMounted(() => {
  inputEl.value?.focus(); // now the DOM element is available
});
</script>

<template>
  <input ref="inputEl" type="text">
</template>

isRef dan unref

isRef(val) memeriksa apakah suatu nilai adalah ref. unref(val) membuka bungkus ref atau mengembalikan nilai apa adanya jika bukan ref. Ini berguna dalam composable yang menerima ref maupun nilai biasa.

import { isRef, unref } from 'vue';

function double(val: Ref<number> | number) {
  return unref(val) * 2; // works with both ref and plain number
}

shallowRef dan shallowReactive

shallowRef() hanya reaktif pada tingkat teratas, bukan secara mendalam. shallowReactive() berlaku sama untuk objek. Gunakan keduanya untuk optimasi performa saat reaktivitas mendalam tidak diperlukan, misalnya pada struktur data besar yang tidak dapat diubah.

Mengubah reactive() vs Mengganti

Dengan reactive(), ubah properti secara langsung. Anda tidak dapat mengganti seluruh objek karena reactive() memerlukan referensi yang sama. Untuk mengganti objek, gunakan ref() yang memungkinkan ref.value = newObject.

const state = reactive({ items: [] });
state.items.push(newItem); // OK
state.items = [newItem];   // also OK (mutating the property)
// state = reactive({ items: [newItem] }); // LOSES REACTIVITY — can't reassign

Reaktivitas Mendalam

reactive() secara bawaan bersifat reaktif secara mendalam—Vue melacak perubahan pada objek dan array bersarang. Hal ini praktis, tetapi dapat mahal untuk objek yang sangat besar. Pertimbangkan shallowReactive untuk kasus yang sensitif terhadap performa.

Cek Cepat

Mengapa destrukturisasi objek reactive() menghilangkan reaktivitas?

Jawab di pelajaran interaktif

Ringkasan: ref() dan reactive()

ref() membungkus nilai primitif; akses melalui .value dalam skrip dan otomatis dibuka bungkusnya dalam templat. reactive() membuat objek reaktif secara mendalam; ubah properti secara langsung. Destrukturisasi menghilangkan reaktivitas—gunakan toRefs(). Gunakan ref(null) untuk referensi elemen templat. Gunakan shallowRef/shallowReactive untuk performa. Gunakan isRef/unref sebagai utilitas composable.

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 41
Pelajaran: 163

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “ref() dan reactive()” gratis?

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

Apa yang akan aku pelajari di “ref() dan reactive()”?

Buat nilai primitif reaktif dengan ref(), bungkus object dengan reactive(), lalu pahami kapan masing-masing digunakan dan cara mengakses nilai ref melalui .value. Kamu berlatih Frontend 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 Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend 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 “ref() dan reactive()” 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 Frontend Academy ini?

Ya. Setiap pelajaran Frontend 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

ref() dan reactive()
computed() dan watch()
Fungsi setup() dan script setup
Composable: Fungsi Composition yang Dapat Digunakan Kembali

← Kembali ke Frontend Academy