Laravel Volt adalah API untuk Livewire yang memungkinkan logika PHP dan template Blade sebuah komponen ditulis dalam satu file. Volt mengubah definisi satu-file itu menjadi komponen Livewire, sehingga komponen tetap dapat memakai kemampuan Livewire tanpa Anda harus membuat kelas komponen bernama secara terpisah. Volt menyediakan gaya fungsional maupun berbasis kelas; pilihan di antaranya terutama soal cara tim ingin menulis dan mengatur kode.
Bagaimana Laravel Volt bekerja?
Dalam pola fungsional Volt, file berekstensi .blade.php memuat bagian PHP dan markup Blade. Fungsi seperti state() mendefinisikan state komponen, sedangkan closure bernama dapat menjadi aksi. Template memanggil aksi itu dengan sintaks Livewire, misalnya wire:click. Volt mengikat closure ke komponen, sehingga logikanya dapat mengakses komponen melalui $this. Di balik layar, Volt mengompilasi API tersebut menjadi komponen Livewire berbasis kelas dan menghubungkannya dengan template dalam file yang sama. Dokumentasi Volt 3.x menjelaskan pola ini.
As an Amazon Associate I earn from qualifying purchases.
Volt juga menerima pola berbasis kelas: file satu-komponen dapat berisi kelas anonim yang memperluas LivewireVoltComponent, diikuti template Blade. Jadi, satu-file tidak berarti Anda harus menggunakan API fungsional. Kedua pola memungkinkan PHP dan Blade untuk sebuah komponen tetap berdekatan.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Apa bedanya Volt dengan komponen Livewire biasa?
Pembedaan utamanya adalah bentuk dan lokasi kode, bukan kemampuan antarmuka yang terpisah. Dalam pola komponen Livewire konvensional, kelas PHP dan tampilan Blade biasanya berada di file terpisah. Volt memungkinkan keduanya didefinisikan bersama, dengan API fungsional atau kelas anonim. Kode tetap menggunakan model komponen dan interaksi Livewire; Volt bukan sistem UI tersendiri.
#1 Best Overall
| Pilihan | Logika dan template | Gaya penulisan | Catatan versi |
|---|---|---|---|
| Komponen Livewire konvensional | Umumnya berada di file kelas PHP dan tampilan Blade yang terpisah. | Kelas komponen bernama. | Pola komponen Livewire. |
| Volt fungsional | Logika PHP dan template berada dalam satu file .blade.php. |
API seperti state() dan closure bernama untuk aksi. |
Dokumentasi Volt yang dirujuk di sini adalah untuk Livewire 3.x. |
| Volt berbasis kelas | Kelas anonim dan template berada dalam satu file. | Kelas anonim yang memperluas LivewireVoltComponent. |
Panduan peningkatan Livewire 4.x menyatakan sintaks ini bekerja sebagai komponen satu-file bawaan setelah peningkatan. |
| Komponen satu-file bawaan Livewire 4.x | Logika dan template dapat ditulis dalam satu file. | Sintaks komponen satu-file bawaan Livewire. | Livewire 4.x menyediakan jalur migrasi dari Volt; periksa panduan versi proyek sebelum mengubah dependensi. |
Dokumentasi tidak memberikan tolok ukur perbandingan performa antara pendekatan-pendekatan ini. Pilih pola berdasarkan versi Livewire, struktur proyek, gaya tim, dan kebutuhan migrasi, bukan asumsi bahwa satu pola selalu lebih cepat.
Konsep Volt yang penting dipahami
State dan parameter komponen
state() mendefinisikan properti yang tersedia bagi logika komponen dan template. Hook mount() dapat menerima parameter komponen; dokumentasi Volt menyebut parameter lain yang dibutuhkan hook dapat diselesaikan melalui service container Laravel.
Nilai awal yang bergantung pada data atau layanan
Jika nilai awal memerlukan query basis data, model, atau layanan, gunakan closure agar resolusinya ditunda sampai diperlukan. Dokumentasi Volt juga menyarankan pendekatan serupa untuk model yang diberikan melalui route model binding Folio. Ini membantu menghindari menjalankan pekerjaan eksternal hanya untuk mendefinisikan nilai awal.
Kontrol properti
locked()dimaksudkan untuk mencegah state tertentu diubah dari sisi klien.reactive()mengatur pembaruan properti dari komponen induk ke komponen anak.modelable()mendukung state yang dibagikan melaluiwire:model.
Fitur-fitur tersebut memiliki tujuan spesifik. Mendefinisikan state biasa saja tidak otomatis memberi perlindungan menyeluruh terhadap perubahan dari klien.
Rank #3
Computed properties dan cache
Gunakan computed() untuk nilai turunan atau nilai yang sebaiknya diambil secara malas. Volt menyatakan hasil computed dimemoisasi selama siklus hidup request Livewire, sehingga akses berikutnya dalam siklus tersebut dapat menggunakan hasil yang sama. persist() dapat menyimpan hasil ke cache aplikasi dan menerima durasi dalam detik. Dokumentasi computed properties Livewire 4.x juga menjelaskan nilai turunan yang dimemoisasi untuk akses selanjutnya selama request; memoization per request tidak sama dengan menyimpan hasil secara persisten di cache.
Fitur Livewire yang dapat digunakan
Dokumentasi Volt mencakup route halaman penuh, layout dan judul, listener, validasi, upload berkas, query URL, pagination, serta pengujian. Ini memperlihatkan bahwa Volt adalah cara lain menulis komponen Livewire, bukan lapisan UI dengan rangkaian fitur yang terpisah.
Cara memasang dan membuat komponen Volt pada Livewire 3.x
Langkah berikut mengikuti dokumentasi Volt untuk Livewire 3.x. Jangan menganggapnya sebagai keharusan instalasi untuk semua proyek Livewire 4.x, yang menyediakan komponen satu-file bawaan.
Recommended Free Tools
- Pasang paket Volt melalui Composer:
composer require livewire/volt. - Jalankan
php artisan volt:installuntuk memasang service provider Volt. - Tempatkan komponen berekstensi
.blade.phpdi direktori yang dipindai provider. Direktori default yang disebut dokumentasi adalahresources/views/livewiredanresources/views/pages; provider dapat disesuaikan untuk direktori lain. - Untuk membuat komponen, jalankan
php artisan make:volt counter. Dokumentasi juga menunjukkan opsi generator--test,--pest, dan--class.
Pastikan instruksi instalasi dan generator cocok dengan versi Livewire serta struktur aplikasi Anda sebelum menerapkannya.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Apakah Volt masih dipakai di Livewire 4?
Livewire 4.x mendukung komponen satu-file secara bawaan dengan sintaks yang sama seperti komponen Volt berbasis kelas. Panduan peningkatannya mencantumkan perubahan seperti mengganti LivewireVoltComponent dengan LivewireComponent, Volt::route() dengan Route::livewire(), dan Volt::test() dengan Livewire::test(). Panduan itu juga mengarahkan pengembang untuk menghapus provider Volt dan paket livewire/volt setelah migrasi. Komponen Volt berbasis kelas disebut dapat bekerja tanpa perubahan setelah peningkatan karena sintaksnya sama dengan komponen satu-file Livewire 4.x. Rujuk panduan peningkatan Livewire 4.x untuk urutan dan cakupan perubahan.
Volt tetap relevan saat memahami pola fungsional dan saat mengelola proyek yang sudah menggunakannya. Untuk proyek Livewire 4.x, komponen satu-file bawaan merupakan alternatif yang dapat dipertimbangkan. Tidak ada satu rekomendasi migrasi yang berlaku untuk semua aplikasi: keputusan bergantung pada versi, dependensi, dan sintaks yang digunakan proyek.
Bagaimana menguji komponen Volt?
Untuk pola Volt 3.x, dokumentasi menunjukkan Volt::test('counter') bersama assertion API pengujian Livewire untuk memeriksa hasil render dan aksi. Dokumentasi pengujian Livewire 4.x merekomendasikan Pest dan memakai API versi tersebut. Karena panduan peningkatan juga mengganti Volt::test() dengan Livewire::test(), gunakan helper yang sesuai dengan versi proyek dan jangan mencampur pola pengujian 3.x dan 4.x tanpa memeriksa kompatibilitasnya. Lihat dokumentasi Volt 3.x, panduan peningkatan Livewire 4.x, dan dokumentasi pengujian Livewire 4.x.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchQuick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
