Reaktivitas Di Vue

Dalam artikel ini, kita akan melihat reaktivitas di Vue, cara kerjanya, dan bagaimana kita bisa membuat variabel reaktif menggunakan metode dan fungsi yang baru dibuat. Artikel ini ditujukan untuk pengembang yang memiliki pemahaman yang baik tentang cara kerja Vue 2.x dan ingin mengenal Vue 3. yang baru.

Kami akan membuat aplikasi sederhana untuk lebih memahami topik ini. Kode untuk aplikasi ini dapat ditemukan di GitHub.

Secara default, JavaScript tidak reaktif . Ini berarti jika kita membuat variabel boy dan mereferensikannya di bagian A dari aplikasi kita, kemudian melanjutkan untuk memodifikasi boy di bagian B, bagian A tidak akan diperbarui dengan nilai baru boy .

 let framework = 'Vue'; let sentence = `${framework} is awesome`; console.log(sentence) // logs "Vue is awesome" framework = 'React'; console.log(sentence) //should log "React is awesome" if 'sentence' is reactive.

Cuplikan di atas adalah contoh sempurna dari sifat non-reaktif JavaScript — oleh karena itu, mengapa perubahan tidak tercermin dalam variabel sentence .

Di Vue 2.x, props , computed , dan data() semuanya reaktif secara default, dengan pengecualian properti yang tidak ada dalam data saat komponen tersebut dibuat. Ini berarti bahwa ketika komponen disuntikkan ke DOM, hanya properti yang ada di objek data komponen yang akan menyebabkan komponen diperbarui jika dan saat properti tersebut berubah.

Secara internal, Vue 3 menggunakan objek Proxy (fitur ECMAScript 6) untuk memastikan bahwa properti ini reaktif, tetapi masih menyediakan opsi untuk menggunakan Object.defineProperty dari Vue 2 untuk dukungan Internet Explorer (ECMAScript 5). Metode ini mendefinisikan properti baru secara langsung pada objek, atau memodifikasi properti yang ada pada objek, dan mengembalikan objek.

Sekilas dan karena kebanyakan dari kita sudah tahu bahwa reaktivitas bukanlah hal baru di Vue, mungkin tampak tidak perlu menggunakan properti ini, tetapi API Opsi memiliki keterbatasan saat Anda berurusan dengan aplikasi besar dengan fungsi yang dapat digunakan kembali di beberapa bagian dari aplikasi. Untuk tujuan ini, API Komposisi baru diperkenalkan untuk membantu mengabstraksi logika agar basis kode lebih mudah dibaca dan dipelihara. Selain itu, sekarang kita dapat dengan mudah membuat variabel apa pun menjadi reaktif terlepas dari tipe datanya menggunakan salah satu properti dan metode baru.

Saat kami menggunakan opsi setup , yang berfungsi sebagai titik masuk untuk Composition API, objek data , properti yang computed , dan methods tidak dapat diakses karena instance komponen belum dibuat saat setup dijalankan. Hal ini membuat tidak mungkin untuk memanfaatkan reaktivitas bawaan di salah satu fitur ini dalam setup . Dalam tutorial ini, kita akan belajar tentang semua cara yang bisa kita lakukan.

Metode Reaktif

Menurut dokumentasi, metode reactive , yang setara dengan Vue.observable() di Vue 2.6, dapat berguna ketika kita mencoba membuat objek yang semua propertinya reaktif (seperti objek data di Opsi API). Di bawah tenda, objek data di API Opsi menggunakan metode ini untuk membuat semua properti di dalamnya reaktif.

Tapi kita bisa membuat objek reaktif kita sendiri seperti ini:

 import { reactive } from 'vue' // reactive state let user = reactive({ "id": 1, "name": "Leanne Graham", "username": "Bret", "email": "[email protected]", "address": { "street": "Kulas Light", "suite": "Apt. 556", "city": "Gwenborough", "zipcode": "92998-3874", "geo": { "lat": "-37.3159", "lng": "81.1496" } }, "phone": "1-770-736-8031 x56442", "website": "hildegard.org", "company": { "name": "Romaguera-Crona", "catchPhrase": "Multi-layered client-server neural-net", "bs": "harness real-time e-markets" }, "cars": { "number": 0 } })

Di sini, kami mengimpor metode reactive dari Vue, dan kemudian kami mendeklarasikan variabel user kami dengan meneruskan nilainya ke fungsi ini sebagai argumen. Dalam melakukannya, kami telah membuat user reaktif, dan, dengan demikian, jika kami menggunakan user di template kami dan jika objek atau properti dari objek ini harus berubah, maka nilai ini akan diperbarui secara otomatis di template ini.

ref

Sama seperti kita memiliki metode untuk membuat objek reaktif, kita juga membutuhkannya untuk membuat nilai primitif mandiri lainnya (string, boolean, nilai tidak terdefinisi, angka, dll.) dan array reaktif. Selama pengembangan, kami akan bekerja dengan tipe data lain ini sambil juga membutuhkannya untuk reaktif. Pendekatan pertama yang mungkin kita pikirkan adalah menggunakan reactive dan meneruskan nilai variabel yang ingin kita jadikan reaktif.

 import { reactive } from 'vue' const state = reactive({ users: [], });

Karena reactive memiliki konversi reaktif yang dalam, user sebagai properti juga akan reaktif, sehingga mencapai tujuan kami; karenanya, user akan selalu memperbarui di mana pun itu digunakan dalam templat aplikasi semacam itu. Tetapi dengan properti ref , kita dapat membuat variabel apa pun dengan tipe data apa pun menjadi reaktif dengan meneruskan nilai variabel tersebut ke ref . Metode ini juga berfungsi untuk objek, tetapi menyarangkan objek satu tingkat lebih dalam daripada saat metode reactive digunakan.

 let property = { rooms: '4 rooms', garage: true, swimmingPool: false } let reactiveProperty = ref(property) console.log(reactiveProperty) // prints { // value: {rooms: "4 rooms", garage: true, swimmingPool: false} // }

Di bawah tenda, ref mengambil argumen ini diteruskan ke sana dan mengubahnya menjadi objek dengan kunci value . Artinya, kita dapat mengakses variabel kita dengan memanggil variable.value , dan kita juga dapat mengubah nilainya dengan memanggilnya dengan cara yang sama.

 import {ref} from 'vue' let age = ref(1) console.log(age.value) //prints 1 age.value++ console.log(age.value) //prints 2

Dengan ini, kita dapat mengimpor ref ke dalam komponen kita dan membuat variabel reaktif:

 <template> <div class="home"> <form @click.prevent=""> <table> <tr> <th>Name</th> <th>Username</th> <th>email</th> <th>Edit Cars</th> <th>Cars</th> </tr> <tr v-for="user in users" :key="user.id"> <td>{{ user.name }}</td> <td>{{ user.username }}</td> <td>{{ user.email }}</td> <td> <input type="number" name="cars" v-model.number="user.cars.number" /> </td> <td> <cars-number :cars="user.cars" /> </td> </tr> </table> <p>Total number of cars: {{ getTotalCars }}</p> </form> </div> </template> <script> // @ is an alias to /src import carsNumber from "@/components/cars-number.vue"; import axios from "axios"; import { ref } from "vue"; export default { name: "Home", data() { return {}; }, setup() { let users = ref([]); const getUsers = async () => { let { data } = await axios({ url: "data.json", }); users.value = data; }; return { users, getUsers, }; }, components: { carsNumber, }, created() { this.getUsers(); }, computed: { getTotalCars() { let users = this.users; let totalCars = users.reduce(function(sum, elem) { return sum + elem.cars.number; }, 0); return totalCars; }, }; </script>

Di sini, kami mengimpor ref untuk membuat variabel users reaktif di komponen kami. Kami kemudian mengimpor axios untuk mengambil data dari file JSON di folder public , dan kami mengimpor komponen carsNumber kami, yang akan kami buat nanti. Hal berikutnya yang kami lakukan adalah membuat variabel users reaktif menggunakan metode ref , sehingga users dapat memperbarui setiap kali respons dari file JSON kami berubah.

Kami juga membuat fungsi getUser yang mengambil larik users dari file JSON kami menggunakan aksioma, dan kami menetapkan nilai dari permintaan ini ke variabel users . Terakhir, kami membuat properti terkomputasi yang menghitung jumlah total mobil yang dimiliki pengguna seperti yang telah kami modifikasi di bagian template.

Penting untuk dicatat bahwa saat mengakses properti ref yang dikembalikan di bagian template atau di luar setup() , properti tersebut secara otomatis akan dibuka bungkusnya. Ini berarti bahwa refs yang merupakan objek masih .value nilai . agar dapat diakses. Karena users adalah sebuah array, kita cukup menggunakan users dan bukan users.value di getTotalCars .

Di bagian template, kami menampilkan tabel yang menampilkan informasi setiap pengguna, bersama dengan komponen <cars-number /> . Komponen ini menerima prop cars yang ditampilkan di setiap baris pengguna sebagai jumlah mobil yang mereka miliki. Nilai ini diperbarui setiap kali nilai cars berubah di objek pengguna , yang merupakan cara kerja objek data atau properti yang computed jika kita bekerja dengan API Opsi.

toRefs

Saat kita menggunakan Composition API, fungsi setup menerima dua argumen: props dan context . Alat props ini diteruskan dari komponen ke setup() , dan memungkinkan untuk mengakses alat peraga yang dimiliki komponen dari dalam API baru ini. Metode ini sangat berguna karena memungkinkan penghancuran objek tanpa kehilangan reaktivitasnya.

 <template> <p>{{ cars.number }}</p> </template> <script> export default { props: { cars: { type: Object, required: true, }, gender: { type: String, required: true, }, }, setup(props) { console.log(props); // prints {gender: "female", cars: Proxy} }, }; </script> <style></style>

Untuk menggunakan nilai yang merupakan objek dari props di Composition API sambil memastikannya mempertahankan reaktivitasnya, kami menggunakan toRefs . Metode ini mengambil objek reaktif dan mengubahnya menjadi objek biasa di mana setiap properti dari objek reaktif asli menjadi ref . Artinya, mobil- cars itu menopang…

 cars: { number: 0 }

… sekarang akan menjadi ini:

 { value: cars: { number: 0 }

Dengan ini, kita dapat menggunakan cars di dalam bagian mana pun dari API penyiapan sambil tetap mempertahankan reaktivitasnya.

 setup(props) { let { cars } = toRefs(props); console.log(cars.value); // prints {number: 0} },

Kita dapat melihat variabel baru ini menggunakan watch Composition API dan bereaksi terhadap perubahan ini sesuai keinginan kita.

 setup(props) { let { cars } = toRefs(props); watch( () => cars, (cars, prevCars) => { console.log("deep ", cars.value, prevCars.value); }, { deep: true } ); }

toRef

Kasus penggunaan umum lainnya yang dapat kita hadapi adalah melewatkan nilai yang belum tentu merupakan objek, melainkan salah satu tipe data yang bekerja dengan ref (array, angka, string, boolean, dll.). Dengan toRef , kita dapat membuat properti reaktif (yaitu ref ) dari objek reaktif sumber. Melakukan hal ini akan memastikan bahwa properti tetap reaktif dan akan diperbarui setiap kali sumber induk berubah.

 const cars = reactive({ Toyota: 1, Honda: 0 }) const NumberOfHondas = toRef(state, 'Honda') NumberOfHondas.value++ console.log(state.Honda) // 1 state.Honda++ console.log(NumberOfHondas.value) // 2

Di sini, kami membuat objek reaktif menggunakan metode reactive , dengan properti Toyota dan Honda . Kami juga menggunakan toRef untuk membuat variabel reaktif dari Honda . Dari contoh di atas, kita dapat melihat bahwa ketika kita memperbarui Honda menggunakan objek cars reaktif atau NumberOfHondas , nilainya diperbarui dalam kedua contoh.

Metode ini serupa namun sangat berbeda dari metode toRefs yang telah kita bahas di atas dalam arti bahwa metode ini mempertahankan koneksinya ke sumbernya dan dapat digunakan untuk string, array, dan angka. Berbeda dengan toRefs , kita tidak perlu khawatir tentang keberadaan properti di sumbernya pada saat pembuatan, karena jika properti ini tidak ada pada saat ref ini dibuat dan sebaliknya mengembalikan null , itu akan tetap disimpan sebagai properti yang valid, dengan bentuk watcher ditempatkan, sehingga ketika nilai ini berubah, toRef ref akan diperbarui.

Kita juga dapat menggunakan metode ini untuk membuat properti reaktif dari props . Itu akan terlihat seperti ini:

 <template> <p>{{ cars.number }}</p> </template> <script> import { watch, toRefs, toRef } from "vue"; export default { props: { cars: { type: Object, required: true, }, gender: { type: String, required: true, }, }, setup(props) { let { cars } = toRefs(props); let gender = toRef(props, "gender"); console.log(gender.value); watch( () => cars, (cars, prevCars) => { console.log("deep ", cars.value, prevCars.value); }, { deep: true } ); }, }; </script>

Di sini, kami membuat ref yang akan didasarkan pada properti gender yang didapat dari props . Ini berguna ketika kita ingin melakukan operasi ekstra pada penyangga komponen tertentu.

Kesimpulan

Dalam artikel ini, kita telah melihat bagaimana reaktivitas di Vue bekerja menggunakan beberapa metode dan fungsi yang baru diperkenalkan dari Vue 3. Kita mulai dengan melihat apa itu reaktivitas dan bagaimana Vue menggunakan objek Proxy di belakang layar untuk mencapainya. Kami juga melihat bagaimana kami dapat membuat objek reaktif menggunakan reactive dan cara membuat properti reaktif menggunakan ref .

Terakhir, kita melihat cara mengubah objek reaktif menjadi objek biasa, yang masing-masing propertinya adalah ref yang menunjuk ke properti yang sesuai dari objek asli, dan kita melihat cara membuat ref untuk properti pada objek sumber reaktif.

Sumber Daya Lebih Lanjut

• “Proxy” (objek), Dokumen Web MDN
• “Dasar-Dasar Reaktivitas”, Vue.js
• “Ref”, Vue.js
• “ setup Bagian Dalam Pendaftaran Kait Siklus Hidup”, Vue.js