# Instance Komponen & Aplikasi

# Membuat Instance Aplikasi

Setiap aplikasi Vue dimulai dengan membuat instance aplikasi dengan memanggil fungsi createApp:

const app = Vue.createApp({
  /* pilihan konfigurasi aplikasi */
})

1
2
3

Instance aplikasi digunakan untuk mendaftarkan sesuatu secara 'global' sehingga kemudian dapat digunakan oleh komponen di dalam aplikasi tersebut. Kita akan membahasnya secara mendalam nanti tetapi sebagai contoh:

const app = Vue.createApp({})
app.component('SearchInput', SearchInputComponent)
app.directive('focus', FocusDirective)
app.use(LocalePlugin)

1
2
3
4

Sebagian fungsi/method yang dihasilkan oleh instance aplikasi mengembalikan instance yang sama, sehingga memungkinkan kita untuk melakukan chaining:

Vue.createApp({})
  .component('SearchInput', SearchInputComponent)
  .directive('focus', FocusDirective)
  .use(LocalePlugin)

1
2
3
4

Anda dapat menelusuri API aplikasi secara menyeluruh pada referensi API.

# Komponen Root

Pilihan yang dilewatkan ke createApp sebagai parameter digunakan untuk mengatur komponen root. Komponen tersebut digunakan sebagai titik awal untuk rendering ketika Vue me-mount aplikasi.

Sebuah aplikasi perlu dipasang (mounted) ke sebuah elemen DOM. Sebagai contoh, jika kita ingin memasang aplikasi Vue ke <div id="app"></div, kita harus melewatkan #app sebagai parameter pada fungsi mount:

const RootComponent = {
  /* pilihan konfigurasi komponen _root_ */
}
const app = Vue.createApp(RootComponent)
const vm = app.mount('#app')

1
2
3
4
5

Tidak seperti fungsi/metode lain pada instance aplikasi, fungsi mount tidak mengembalikan instance aplikasi. Fungsi tersebut mengembalikan instance komponen root sebagai gantinya.

Meskipun tidak terkait secara ketat dengan pola MVVM (opens new window), desain Vue sebagian terinspirasi oleh konsep tersebut. Sebagai ketentuan, kita sering menggunakan variabel vm (kependekan dari ViewModel) untuk mengacu pada instance komponen.

Walaupun semua contoh pada halaman ini hanya membutuhkan satu komponen saja, sebagian besar aplikasi besar di luar sana diatur menjadi sebuah struktur komponen yang bersarang dan dapat digunakan kembali. Sebagai contoh, struktur komponen aplikasi Todo mungkin akan terlihat seperti berikut:

Root Component
└─ TodoList
   ├─ TodoItem
   │  ├─ DeleteTodoButton
   │  └─ EditTodoButton
   └─ TodoListFooter
      ├─ ClearTodosButton
      └─ TodoListStatistics

1
2
3
4
5
6
7
8

Setiap komponen memiliki instance komponennya sendiri, vm. Pada beberapa komponen, seperti TodoItem, kemungkinan ia akan memiliki banyak instance komponen yang di-render secara bersama. Semua instance komponen pada aplikasi ini akan berbagi instance aplikasi yang sama.

Kita akan membicarakan mengenai sistem komponen secara mendalam nantinya. Untuk sekarang, ketahuilah bahwa komponen root tidak jauh berbeda dengan komponen lainnya. Pilihan konfigurasinya sama, sebagaimana perilaku instance komponen pada umumnya.

# Properti Instance Komponen

Pada panduan sebelumnya, kita telah memahami properti data. Properti yang didefinisikan pada data tersedia melalui instance komponen:

const app = Vue.createApp({
  data() {
    return { count: 4 }
  }
})

const vm = app.mount('#app')

console.log(vm.count) // => 4

1
2
3
4
5
6
7
8
9

Ada banyak pilihan konfigurasi komponen lainnya yang dapat ditambahkan sendiri oleh pengembang. Konfigurasi tersebut nantinya juga dapat diakses melalui instance komponen. Konfigurasi komponen tersebut seperti methods, props, computed, inject dan setup. Kita akan membahas masing-masing secara mendalam nanti. Semua properti pada instance komponen, bagaimanapun cara mereka didefinisikan, akan dapat diakses melalui templat komponen.

Vue juga menyediakan properti bawaan melalui instance komponen, seperti $attrs dan $emit. Semua properti ini memiliki awalan $ untuk membedakan nama properti yang didefinisikan sendiri oleh pengembang.

# Lifecycle Hook

Setiap komponen melalui beberapa langkah inisialisasi ketika ia dibuat - sebagai contoh, komponen tersebut perlu memasang observasi data, mengompilasi templat, memasang instance ke DOM, dan memutakhirkan DOM ketika terjadi perubahan data. Selama proses tersebut berlangsung, komponen tersebut juga menjalankan fungsi yang bernama lifecycle hooks, memberikan kesempatan pada pengembang untuk menambahkan kode mereka sendiri pada tahap tertentu.

Sebagai contoh hook created dapat digunakan untuk menjalankan kode setelah instance dibuat:

Vue.createApp({
  data() {
    return { count: 1 }
  },
  created() {
    // `this` mengarah ke _instance_ vm
    console.log('count bernilai: ' + this.count) // => "count bernilai: 1"
  }
})

1
2
3
4
5
6
7
8
9

Ada juga hook lain yang akan dipanggil pada tahap siklus hidup instance tertentu, seperti mounted, updated, dan unmounted. Semua lifecycle hooks dipanggil dengan konteks this yang mengarah ke instance aktif sekarang yang menjalankannya.

TIP

Jangan gunakan arrow functions (opens new window) pada properti konfigurasi komponen atau callback, seperti created: () => console.log(this.a) atau ``vm.$watch('a', newValue => this.myMethod()). Karena _arrow function_ tidak memilikithis,thisakan dianggap sebagai variabel lain dan secara leksikal mencari ke jangkauan _parent_ sampai variabel tersebut ditemukan, hal tersebut sering menyebabkan galat (_error_) sepertiUncaught TypeError: Cannot read property of undefinedatauUncaught TypeError: this.myMethod is not a function`.

# Diagram Lifecycle

Berikut merupakan diagram untuk lifecycle instance. Anda tidak perlu memahaminya secara menyeluruh sekarang, tetapi ketika Anda belajar dan membuat lebih banyak aplikasi, diagram berikut dapat menjadi referensi yang berguna.

← Perkenalan Sintaksis Templat →