Vue Academy · Pelajaran

Dasar-Dasar Reaktivitas

Pelajari cara Vue melacak dependensi reaktif.

Dasar-Dasar Reaktivitas adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 3. 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 3 pelajaran total.

Apa Itu Reaktivitas?

Reaktivitas adalah kemampuan Vue untuk memperbarui DOM secara otomatis saat data Anda berubah.

Anda mengubah suatu nilai dalam JavaScript
Vue mendeteksi perubahan tersebut
Tampilan dirender ulang agar sesuai

Tidak diperlukan manipulasi DOM secara manual.

Cara Vue Melacak Dependensi

Vue menggunakan sistem pelacakan dependensi.

Saat proses render membaca nilai reaktif, Vue mencatat dependensi tersebut
Saat nilai itu berubah kemudian, Vue mengetahui proses render mana yang harus dijalankan ulang
Hal ini membuat pembaruan menjadi tepat dan efisien

ref untuk Nilai Primitif

Dalam Composition API, ref membuat satu nilai menjadi reaktif.

import { ref } from "vue"

const count = ref(0)
const name = ref("Ada")

count.value++          // update via .value
console.log(name.value) // read via .value

ref dalam Templat

Dalam templat, ref secara otomatis dibuka, sehingga Anda tidak perlu menulis .value.

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

<template>
  <p>{{ count }}</p>
  <button @click="count++">Add</button>
</template>

reactive untuk Objek

reactive membuat seluruh objek menjadi reaktif. Anda mengakses properti secara langsung, tanpa .value.

import { reactive } from "vue"

const state = reactive({
  count: 0,
  user: { name: "Ada" }
})

state.count++
state.user.name = "Grace"

ref vs reactive

Memilih di antara keduanya:

ref berfungsi untuk nilai apa pun (nilai primitif dan objek), diakses dengan .value
reactive hanya untuk objek, diakses secara langsung

Banyak tim lebih memilih ref untuk semua hal demi konsistensi.

Opsi data (Vue 2 / Options API)

Options API menggunakan fungsi data. Setiap properti yang dikembalikan bersifat reaktif.

export default {
  data() {
    return {
      count: 0,
      items: []
    }
  },
  methods: {
    add() { this.count++ }
  }
}

Keterbatasan Reaktivitas pada Larik

Penetapan indeks larik secara langsung dapat membingungkan, terutama dalam Vue 2.

Dalam Vue 2, menetapkan arr[5] = x tidak memicu pembaruan
Proksi Vue 3 menangani sebagian besar kasus, tetapi Anda tetap perlu berhati-hati

Utamakan metode larik demi kejelasan dan keamanan.

Metode Larik Reaktif

Metode yang mengubah data seperti push, splice, dan pop dilacak secara reaktif.

const items = reactive([1, 2, 3])

items.push(4)        // reactive
items.splice(0, 1)   // reactive

// Replacing an index in Vue 3 proxy:
items[0] = 99        // works in Vue 3

Mengganti vs Mengubah

Ada dua cara untuk memperbarui larik:

Ubah dengan push, splice, sort
Ganti dengan menetapkan larik baru, misalnya dari filter atau map

Keduanya memicu reaktivitas dalam Vue 3. Penggantian sering kali lebih bersih untuk daftar turunan.

// Mutate
state.list.push(item)

// Replace with a filtered copy
state.list = state.list.filter(x => x.active)

Menghindari Hilangnya Reaktivitas

Destrukturisasi objek reaktif memutus reaktivitas untuk variabel-variabel tersebut.

Mengeluarkan properti akan menyalin nilainya saat ini
Gunakan toRefs agar reaktivitas tetap terjaga saat melakukan destrukturisasi

import { reactive, toRefs } from "vue"

const state = reactive({ count: 0 })

// Keeps reactivity
const { count } = toRefs(state)

Pemeriksaan Singkat

Uji pemahaman Anda tentang reaktivitas Vue.

Ringkasan: Dasar-Dasar Reaktivitas

Anda telah mempelajari cara kerja reaktivitas Vue:

Vue melacak data yang digunakan setiap proses render
ref membuat nilai menjadi reaktif (gunakan .value dalam JS)
reactive membuat objek menjadi reaktif (akses secara langsung)
Options API menggunakan fungsi data
Gunakan metode larik dan toRefs agar reaktivitas tidak hilang

Berikutnya: properti computed.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Dasar-Dasar Reaktivitas” gratis?

Ya — teks lengkap “Dasar-Dasar Reaktivitas” 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 3 pelajaran total.

Apa yang akan aku pelajari di “Dasar-Dasar Reaktivitas”?

Pelajari cara Vue melacak dependensi reaktif. 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 3.

Berapa lama pelajaran “Dasar-Dasar Reaktivitas” 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

← Kembali ke Vue Academy