Belajar Vue - Konsep Dasar & Arsitektur Utama

#Pendahuluan

Episode 1 menjelaskan mengapa Vue ada. Episode 2 menjawab bagaimana Vue bekerja. Sebelum kalian menulis komponen demi komponen, pahami mesin di baliknya: bagaimana data menjadi reaktif, bagaimana template menjadi DOM, dan bagaimana sebuah komponen lahir lalu mati.

Episode ini membedah arsitektur utama Vue 3 dari tiga lapisan: sistem reactivity berbasis Proxy, pipeline compilation dari template ke Virtual DOM, dan component lifecycle. Terakhir kita bedah anatomy Single File Component dan cara aplikasi di-mount beserta plugin. Ini adalah episode yang paling teknis di fase pertama — tahan dulu, karena semua konsep di sini akan kalian rasakan langsung mulai episode 3.

#Sistem Reaktivitas Vue 3

#Proxy-Based Dependency Tracking

Di Vue 3, reaktivitas dibangun di atas Proxy JavaScript. Saat kalian memanggil reactive({...}) atau ref(0), Vue membungkus object dengan Proxy yang mencegat pembacaan dan penulisan properti:

Cara kerja Proxy reactivity

import { reactive, effect } from "vue";
 
const state = reactive({ count: 0 });
 
effect(() => {
  console.log("count sekarang", state.count);
});

Saat effect dijalankan, ia membaca state.count, dan Proxy mencatat bahwa efek tersebut bergantung pada properti itu. Ketika suatu saat properti diubah, Proxy memberi tahu efek untuk dijalankan ulang. Inilah dependency tracking: setiap efek tahu data apa yang dia butuhkan.

#ref dan reactive

Dua API utama reaktivitas:

• ref(0) membungkus nilai primitif; akses lewat .value.
• reactive({...}) membungkus object; akses langsung tanpa .value.

ref vs reactive

const jumlah = ref(0);
const user = reactive({ nama: "Arman" });
 
jumlah.value = 1;
user.nama = "Budi";

jumlah.value = 1 mengubah nilai ref, sedangkan user.nama = "Budi" mengubah properti object reaktif. Di template, .value pada ref otomatis di-unwrap sehingga kalian cukup menulis {{ jumlah }}.

#Pipeline Rendering: Template ke DOM

#Template Compilation dan Virtual DOM

Template Vue tidak dibaca langsung oleh browser. Alurnya:

1. Compile: template dikompilasi menjadi fungsi render JavaScript.
2. Render: fungsi render menghasilkan Virtual DOM — representasi plain object dari UI.
3. Patch: Vue membandingkan Virtual DOM baru dengan yang lama dan menerapkan perubahan minimal ke DOM nyata.

template -> render function -> virtual dom -> patch -> dom nyata

Ini membuat pengembangan tetap deklaratif (kalian menulis template), sementara performa dijaga karena hanya perbedaan yang disentuh di DOM.

#Kapan Kompilasi Terjadi

Di project Vite, kompilasi template terjadi saat build melalui plugin Vue, sehingga bundle yang dikirim ke browser berisi fungsi render — bukan template mentah. Ini menjawab kenapa aplikasi Vue tidak memerlukan compiler di production: kompilasi sudah dilakukan di waktu build.

#Siklus Hidup Komponen

#Kelahiran Hingga Kematian

Setiap komponen melewati fase-fase berikut:

Lifecycle hooks utama

import { onMounted, onUpdated, onUnmounted } from "vue";
 
onMounted(() => {
  console.log("komponen dipasang ke DOM");
});
onUpdated(() => {
  console.log("komponen diperbarui");
});
onUnmounted(() => {
  console.log("komponen dilepas");
});

Urutannya: setup berjalan paling awal, lalu komponen di-mount (pernah onMounted), diperbarui setiap ada perubahan data (pernah onUpdated), dan akhirnya dilepas (onUnmounted). Di onMounted kalian biasanya mengambil data atau memulai interval; di onUnmounted kalian membersihkannya.

#Single File Components dan Setup

#Anatomy File .vue

Single File Component (SFC) mengemas struktur, perilaku, dan tampilan satu komponen dalam satu file:

Anatomi SFC

<script setup>
import { ref } from "vue";
const nama = ref("Dunia");
</script>
 
<template>
  <h1>Halo, {{ nama }}</h1>
</template>
 
<style scoped>
h1 {
  color: #42b883;
}
</style>

Tiga blok utama: <script setup> untuk logika dengan composition API, <template> untuk markup, dan <style scoped> untuk CSS yang hanya berlaku di komponen ini. scoped bekerja dengan menambahkan atribut unik ke setiap elemen saat kompilasi, mencegah style bertabrakan antar komponen.

#Props, Emits, dan Slots

Antarmuka komponen terdiri dari tiga arah komunikasi:

• Props: data masuk dari parent ke child.
• Emits: event keluar dari child ke parent.
• Slots: konten dari parent dirender di dalam child.

Antarmuka komponen

<script setup>
const props = defineProps({ judul: String });
const emit = defineEmits(["klik"]);
</script>
 
<template>
  <button @click="emit('klik')">{{ props.judul }}</button>
</template>

defineProps dan defineEmits adalah macro kompilator — kalian cukup deklarasi, dan kompilator mengekstraknya secara otomatis. Detail lengkap komunikasi antar komponen akan kita bedah di episode 6.

#Application Instance dan Plugin

#Mount dan Konfigurasi Global

Sebuah aplikasi Vue dimulai dari satu root component yang di-mount ke elemen DOM:

Membuat dan mounting aplikasi

import { createApp } from "vue";
import App from "./App.vue";
import { createPinia } from "pinia";
 
const app = createApp(App);
app.use(createPinia());
app.mount("#app");

createApp(App) membuat application instance, app.use(createPinia()) mendaftarkan plugin Pinia, dan app.mount("#app") memasang aplikasi ke elemen dengan id app. Plugin adalah mekanisme untuk menambahkan kemampuan global — seperti routing, state management, atau i18n — tanpa mengubah kode aplikasi.

#Penutup

Episode 2 membedah mesin Vue dari dalam: sistem reaktivitas berbasis Proxy dengan dependency tracking, pipeline template yang dikompilasi menjadi Virtual DOM, siklus hidup komponen yang terukur, dan anatomy SFC dengan <script setup>, template, serta scoped style.

Inti yang harus dibawa pulang:

• Reaktivitas Vue 3 dibangun di atas Proxy dan dependency tracking.
• ref untuk nilai primitif, reactive untuk object.
• Template dikompilasi ke fungsi render saat build, lalu di-patch minimal ke DOM.
• Lifecycle: setup, mounted, updated, unmounted.
• SFC punya tiga blok: script setup, template, dan style scoped.
• Aplikasi dibuat dengan createApp, plugin didaftarkan dengan app.use.

Di episode 3 selanjutnya kita akan memulai proyek Vue sungguhan — struktur folder src/components dan src/views, cara kerja dev server dan hot module replacement, serta konfigurasi ESLint, Prettier, dan lint-staged untuk menjaga kualitas kode sejak hari pertama.