by Anggie Bratadinata

Mengenal VueJS – 02

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 ...