Mendeteksi Perubahan Dasar Pada Vue JS
framework front-end generasi terbaru menawarkan potensi untuk mengelola pengguna dengan lebih baik dan memberikan pengalaman pengguna (UX) sebaik mungkin. Untuk melakukan ini, Anda perlu memberikan data terbaru yang tersedia kepada pengguna Anda. Masalah yang muncul adalah bagaimana mendeteksi perubahan dan melihatnya secara real time. Untuk banyak kumpulan opsi, penting untuk mempertahankan rasio kesederhanaan terhadap fleksibilitas pada tingkat yang diharapkan. VueJS menonjol sebagai salah satu framework paling sederhana namun paling fleksibel.
Perbarui data Anda
Untuk memberikan UX kualitas tertinggi kepada pengguna, kami memerlukan algoritma deteksi perubahan yang lancar dan pembaruan tata letak yang lancar. Menampilkan pengikatan dua arah (two-way binding), VueJS menawarkan kinerja tinggi dan aliran data yang mudah. Fitur lainnya adalah DOM virtual. Ini adalah adik dari HTML DOM tradisional yang lebih cerdas dan lebih efisien.
Bagaimana cara kerjanya?
Salah satu cara untuk terus memperbarui data di mana saja adalah pengikatan data dua arah dengan arahan v-model. Biarkan saya menjelaskan cara kerjanya dengan contoh basic code.
<div id=”app”>
<input v-model=”myValue” type=”number”>
</div>
let vm = new Vue({
data: {
myValue: 1,
myObject: {},
myArray: []
},
methods: {
changeValue() {
this.myValue = 2;
}
}
})
Nilai field input secara otomatis diatur ke 1. Ketika pengguna membuat perubahan, itu secara otomatis disebarkan ke properti myValue. Saat method changeValue dipanggil, nilai properti myValue berubah menjadi 2 dan langsung terlihat di UI.
Saat instance Vue dibuat, DOM virtual secara otomatis dibangun berdasarkan data yang ditentukan sebelumnya dan komponen dependen. Setiap instance Vue memiliki setidaknya satu komponen. Jika opsi data komponen Vue adalah objek JavaScript (JS) biasa, Vue akan membuat getter dan setter yang sesuai untuk semua propertinya. Properti ini dianggap reaktif, getter dan setter sederhana implisitnya adalah bagian dari algoritma deteksi perubahan Vue default. Ketika perubahan terjadi, fungsi setter dipanggil dan komponen akhirnya merender ulang dan membuat ulang DOM virtual. Ini hanya memperbarui bagian HTMLDOM yang relevan menggunakan berbagai algoritma diff.
Bagaimana jika ini tidak berhasil?
Sayangnya, pendekatan ini mungkin bukan yang terbaik. Menurut dokumentasi resmi VueJS, Vue tidak dapat mendeteksi penghapusan dan penambahan. Artinya, Anda tidak dapat menambahkan properti reaktif baru ke objek hanya dengan menetapkan nilai. Juga, Anda tidak dapat menambahkan properti responsif tingkat root baru
//Neither of this will be reactive
this.myNewValue = 1; //new root-level property
this.myObject.someProperty = 1; //new nested object property
this.myObject[‘someProperty’] = 1; //new nested object property
this.myArray[0] = 1; //new nested array element
Untuk membuat reaktivitas baru, Anda perlu menggunakan metode yang khusus untuk tujuan itu.
Vue.set(object, property, value)
Memanggil metode ini membuat properti reaktif.
Setiap instance Vue juga memiliki metode $set. Ini adalah sugar sintaksis untuk metode yang dijelaskan di atas.
this.$set(object, property, value)
//All will make the property reactive
Vue.set(this.myObject, ‘someProperty’, 1);
this.$set(this.myObject, ‘someProperty’, 1);
Array harus diperlakukan seperti objek lainnya. Harus memberikan indeks elemen alih-alih nama properti
this.$set(this.myArray, 0, 1);
Tentu saja, array memiliki metode tambahan seperti push, slice, dan splice. Ini juga yang menyebabkan magic tersendiri :) .
Jika Anda perlu menetapkan beberapa properti reaktif, Anda dapat menambahkannya satu per satu menggunakan proses yang dijelaskan, jika Anda mengetahui semua propertinya. Di sisi lain, jika Anda tidak yakin dengan kumpulan properti baru, sebaiknya gunakan pendekatan universal.
Buat objek baru dan ganti yang lama dengan objek itu
//Object b holds all properties which should be added
this.myObject = Object.assign({}, this.myObject, b);
Alasan penggantian adalah sebagai berikut:
- Object.assign() dan metode serupa lainnya tidak memanggil metode Vue.set(), jadi semua perubahan selanjutnya tidak relevan dan diabaikan.
- Ganti tidak hanya menggantikan nilai, tetapi juga referensi yang memanggil rendering ulang komponen.
- Jika "properti dari properti" diubah, itu mungkin tidak terdeteksi.
Kombinasi Vue.set dan penggantian objek juga memberikan perilaku yang diharapkan.
this.$set(this, ‘myObject’, Object.assign({}, this.myObject, b))
Kesimpulan
Dengan pembatasan saat ini dari VueJS dan Javascript itu sendiri, cara teraman untuk memastikan bahwa semua perubahan terlihat dan dapat ditemukan adalah dengan mengantisipasi semua properti yang mungkin sebelum instance Vue dibuat. Untuk mendeklarasikan dan menerapkan perubahan tersebut menggunakan metode Vue khusus. Anda perlu menambahkan properti baru.
Selain itu, pastikan bahwa nilai seperti objek (objek, array, dll.) terus diperbarui menggunakan metode reaktif yang disematkan atau dengan penggantian referensi sederhana.