Ngelanjutin artikel VueJS sebelumnya, kali ini kita bahas sedikit tentang fitur Reactive Programming.
Apa itu Reactive Programming?
RP adalah metodologi pemrograman berbasis event. Ada event, ada reaksi. Jadi kalo Anda punya riwayat sebagai programer Flash/Flex, kayak saya, sebenernya Anda udah pernah nyerempet-nyerempet RP lewat event-based programming yang jadi makanan programer Flash sehari-hari. Bedanya, di RP antara koneksi antara event dispatcher & event listener dibuat abstrak / disembunyiin dibalik interface sederhana. Jadi ga perlu secara eksplisit jalanin addEventListener
atau dispatchEvent
dsb.
Binding 2 Arah
Di artikel sebelumnya, kita pake binding satu arah. Maksudnya, kalo data dari objek Vue berubah, DOM otomatis di-update, tapi ga sebaliknya. 2-way binding artinya kalo DOM di-update, data juga di-update. Untuk bikin binding 2-arah, kita pake direktif v-model
.
See the Pen VueJS – Binding 2 Arah by Anggie Bratadinata (@masputih) on CodePen.
Dalam contoh di atas, kalo salah satu text input diubah isinya, input yang lain & paragraf di tengahnya juga ikut berubah karena ada 2-way binding antara input dengan app.title
.
Computed Properties
Computed property (CP) adalah data/properti sebagai hasil pemrosesan data lain. Nilai CP hanya akan diperbarui kalo salah data yang dipake berubah nilainya.
See the Pen VueJS – Computed Prop by Anggie Bratadinata (@masputih) on CodePen.
Computed vs Method
Computed properties punya fitur cache. Jadi CP hanya di update kalo nilai data sumbernya berubah. Makanya biarpun kita bisa pake method untuk hasil yang sama, lebih baik pake CP. Biar lebih gampang, coba liat contoh perbandingan antar CP & method.
See the Pen VueJS – Computed Prop 2 (Caching) by Anggie Bratadinata (@masputih) on CodePen.
Coba buka konsol & liat berapa kali CP reversedTitle
& method reverseFn
dijalanin. Beda dengan method, CP hanya dijalanin satu kali.
Watched Properties
Di samping computed property, Vue juga nyediain watched properties. Cara kerjanya mirip computed. Sama-sama berupa function yang dijalanin kalo data berubah. Syaratnya, nama function yang handel perubahan data harus sama dengan nama datanya. Jadi watcher buat data.title
namanya watch.title
.
See the Pen VueJS – Watch Object by Anggie Bratadinata (@masputih) on CodePen.
Cara lain untuk bikin watcher adalah pake API namanya $watch
. Kode di atas bisa ditulis kayak begini:
app.$watch('title', function(value){ //dst })
Terus apa bedanya watch
sama computed property ? Setau saya sih watch
itu untuk operasi yang bersifat asinkron misalnya nyimpen data ke database.
Jadi segitu aja bahasan tentang Reactive Programming ala VueJS. Kapan-kapan dilanjutin lagi.
Mudah-mudahan bermanfaat.
Also in this category ...
- » Mengenal Hook di ReactJS
- » Rust 101: Hello Rust
- » JS : Pemrograman Asinkron
- » End-to-end Testing dengan The Intern
- » Cara Mudah Pakai Environment Variable dengan Webpack