Fungsi Pengaturan Di Vue 3 Komposisi API

Di Vue.js 2, objek Komponen dapat memiliki opsi data, komputasi, metode, dan arloji. Kami akan menggunakan opsi ini untuk menulis logika fungsional komponen. Tetapi ketika komponen kami tumbuh lebih besar, logika fungsional juga tumbuh. Jadi kami akhirnya menulis logika yang sama dalam opsi yang berbeda. Artinya kita harus menulis beberapa bagian dalam opsi data, beberapa bagian dalam metode, dan lainnya (dihitung, menonton) juga. Jadi akan sulit untuk memahami logika inti komponen Karena telah ditulis di tempat yang berbeda.

Terakhir, Vue.js 3 memperkenalkan Composition API di mana kita dapat memecahkan masalah tersebut. Di Composition API, kita dapat menulis atau menggabungkan semua logika opsi (data, komputasi, metode, jam tangan) di satu tempat.
Di Composition API, kami menyebut tempat ini sebagai setup. Kita dapat menggabungkan atau menulis semua logika inti komponen dalam fungsi pengaturan. Dalam hal ini kita dapat mengatur logika single-core bahkan untuk komponen yang kompleks. Akan sangat membantu untuk membaca tentang Komponen File Tunggal di Vue 3 sebelum pindah ke fungsi pengaturan di sesi ini. Mari lihat.

Fungsi pengaturan di API Komposisi

Fungsi penyetelan adalah titik masuk dalam API Komposisi. Ini akan dipanggil sebelum komponen dibuat dan setelah alat peraga disiapkan. Artinya, sebelum mengkompilasi dan mengolah template-nya menjadi objek render. Fungsi pengaturan dipanggil sebelum hook beforeCreate. Perhatikan bahwa referensi ini tidak akan tersedia di dalam fungsi pengaturan. Karena komponennya belum dibuat.
Selanjutnya kita akan melihat bagaimana menggunakan fungsi setup. Setup adalah fungsi dengan dua argumen (alat peraga dan konteks). Apa pun yang dikembalikan dari fungsi pengaturan akan tersedia di seluruh komponen kami. Selain itu akan dapat diakses di dalam template juga. Biarkan saya menjelaskan hal yang sama dengan contoh di bawah ini:

 <template> <div> <button> {{label}} </button> </div> </template> <script> export default { pros : { label : String , }, setup ( props ) { console . log ( props ); //{label:''} //write component core logics here //anything returned from setup function will be //available throughout our component return {}; }, //return object from setup function accessible here }; </script>

Fungsi pengaturan di API Komposisi — Argumen Argumen

Fungsi pengaturan memiliki dua argumen,

  1. Atribut
  2. konteks Mari kita lihat bagaimana argumen ini digunakan dalam komponen.

Atribut

Alat peraga adalah argumen pertama dari fungsi pengaturan, yang sifatnya reaktif. Jadi sementara kami memperbarui alat peraga, komponen akan diperbarui. Contoh dasarnya sebagai berikut:

 export default { props : { label : String , }, setup ( props ) { console . log ( props . label ); }, };

Alat Peraga dengan ES6 Destructive

Perhatikan bahwa props bersifat reaktif secara default. Jadi kita tidak bisa menggunakan Object destructuring karena akan menghilangkan sifat reaktif. Kami dapat memecahkan masalah seperti itu menggunakan toRefs. toRefs berguna ketika objek reaktif sedang dirusak/disebarkan.

 import { toRef } from " vue " ; export default { props :{ label : String , }, setup ( props ) { const { label } = toRefs ( props ); console . log ( label . value ); }, };

Perhatikan bahwa, jika label adalah prop opsional, maka toRefs tidak akan membuat referensi reaktif untuk label. Di sini kita perlu menggunakan toRef daripada toRefs. Biarkan saya menunjukkan hal yang sama dengan contoh di bawah ini:

 export default { props : { label : String , }, setup ( props ) { const { label } = toRefs ( props , " label " ); console . log ( label . value ); }, };

Konteks

Konteks adalah argumen kedua dari fungsi pengaturan yang sifatnya tidak reaktif. Ini adalah objek JavaScript normal. Ini memiliki tiga sifat komponen:

  1. attrs — Atribut (Non-Reaktif)
  2. slot — Slot (Non-Reaktif)
  3. memancarkan — Metode (Emit event)
 export default { setup ( props , context ) { console . log ( context . attrs ) // non reactive consoole . log ( context . slots ) // non reactive console . log ( context . emit ) // emit events } }

Perhatikan bahwa konteksnya tidak reaktif. Jadi kita bisa menggunakan Object destructuring di sini sebagai berikut:

 export default { setup ( props , { attrs , slots , emit }) { //write logics here }, };

Fungsi pengaturan dengan Template

Properti props dan apa pun yang dikembalikan dari fungsi setup akan dapat diakses di template komponen. Mari saya jelaskan dengan contoh di bawah ini:

CustomButton.vue

 <template> <div> <div> {{counterMsg.msg}}.{{counter}} </div> <button @ click= "()=> counter++" ></button> </div> </template> <script> import { ref , reactive } from " vue " ; export default { //props properties accessible to template props : { label : String , }, setup ( props ) { console . log ( props . label ); const counter = ref ( 0 ); const counterMsg = reactive ({ msg : " click the button " }); // object accessible to templates return { counter , counterMsg , }; }, }; </script>

Pada contoh counter di atas, counterMsg berasal dari fungsi setup dan label dari props yang dapat diakses di template. Perhatikan bahwa ketika kita mengakses ref di dalam template, itu akan membuka nilai dalam secara otomatis. Tidak perlu menambahkan .value dalam template.

Fungsi pengaturan dengan render { h }

Sama seperti template, kita juga bisa menggunakan setup dengan fungsi render. Di sini kita akan menggunakan h sebagai ganti template dalam komponen. Mari saya jelaskan dengan contoh di bawah ini:

 import { ref , reactive , h } from " vue " ; //props properties accessible to template export default { props : { label : String , }, setup ( props ) { console . log ( props . label ); const counter = ref ( 0 ); const counterMsg = reactive ({ msg : " click the button " }); // Note that we have to give ref value in render function return () => h ( " button " , { onClick : () => counter . value ++ , }, props . label ); }, };

Dalam contoh di atas, komponen yang sama telah diimplementasikan menggunakan fungsi render. Kita dapat mengubah template kita menjadi fungsi render (h) menggunakan Kompilasi Template.

Kesimpulan

Jadi kita telah belajar tentang fungsi setup hari ini. Komposisi API adalah konsep dasar dari Vue3. Tujuan akhir dari komposisi API adalah untuk mengatur logika komponen yang kompleks di satu tempat. Biasanya tempat itu tidak lain adalah fungsi pengaturan. Poin penting lainnya adalah ini tidak akan tersedia di sini tidak seperti opsi lain dalam komponen.

June 6, 2021

codeorayo

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Leave a Reply

Your email address will not be published. Required fields are marked *