Laravel Livewire ir lielisks rīks, lai panāktu dinamisku uzvedību tīmekļa lapā, tieši neierakstot JavaScript kodu. Tas padara dinamisku saskarņu izveidi vienkāršu, neatstājot Laravel ērtības. Nesen Livewire kodols ir pilnībā pārrakstīts.
Jaunajam Livewire v3 ir labāka atšķirība, funkcijas var izveidot ātrāk, un ir mazāka dublēšanās starp Livewire un Alpine, jo tas vairāk paļaujas uz Alpine un izmanto tā Morph, History un citus spraudņi. Vairākas no jaunajām funkcijām kļuva iespējamas, pārstrukturējot kodu bāzi un liekot lielāku uzsvaru uz Alpine.
1. Automātiski ievadiet Livewire skriptus, stilus un Alpine
Pēc tam, kad komponists ir instalējis Livewire v2, izkārtojumam manuāli jāpievieno @livewireStyles, @livewireScripts un Alpine. Izmantojot Livewire v3, jums vienkārši jāinstalē Livewire, un viss nepieciešamais tiek automātiski ievadīts, tostarp Alpine!
<!DOCTYPE html>
<html lang="lv">
<galvu>
<skripts src="//unpkg.com/alpinejs" atlikt></script>
@livewireStyles@livewireScripts
</head>
<ķermeni>
...
</body>
</html>2. JavaScript funkcijas PHP klasēs
Livewire v3 atbalstīs JavaScript funkciju rakstīšanu tieši jūsu aizmugursistēmas Livewire komponentos. Pievienojiet savam komponentam funkciju, pievienojiet /\*_ @js _/ komentāru virs funkcijas, pēc tam atgrieziet JavaScript kodu, izmantojot PHP HEREDOC sintaksi, un izsauciet to no priekšgala. JavaScript kods tiks izpildīts, nenosūtot nekādus pieprasījumus jūsu aizmugursistēmai.
<?php
nosaukumvietaApp\Http\Livewire;
klasēTodospagarina \Livewire\Komponents
{
/** @prop */
publiski $todos;
/** @js */
publiskifunkcijuskaidrs()
{
atgriezties <<<'JS'
this.todo = '';
JS;
}
}
?>
<div>
<ievades vads: modelis="darīt" />
<pogas vads: klikšķis="skaidrs">Skaidrs</button>
</div>3. Bloķēti rekvizīti
Livewire v3 atbalstīs bloķētos rekvizītus — rekvizītus, kurus nevar atjaunināt no priekšgala. Pievienojiet /\*\* @locked / komentāru virs sava komponenta rekvizīta, un Livewire izliks izņēmumu, ja kāds mēģinās atjaunināt šo īpašumu no priekšgala.
<?php
nosaukumvietaApp\Http\Livewire;
klasēTodospagarina \Livewire\Komponents
{
/** @bloķēts */
publiski $todos = [];
}
?>4. Vads: modelis ir atlikts pēc noklusējuma
Tā kā Livewire un tā lietojums ir attīstījies, mēs esam sapratuši, ka "atliktā" darbība ir saprātīgāka 95% veidlapu, tāpēc v3 versijā "atliktā" funkcionalitāte būs noklusējuma funkcionalitāte. Tas ietaupīs no nevajadzīgiem pieprasījumiem uz jūsu serveri un uzlabos veiktspēju. Ja jums ir nepieciešama “tiešraides” funkcionalitāte ievadei, varat izmantot vadu: model.live, lai iespējotu šo funkcionalitāti.
Šī ir viena no nedaudzajām izmaiņām no v2 uz v3.
5. Pieprasījumi tiek sagrupēti
Livewire v2, ja jums ir vairāki komponenti, kas izmanto vadu: aptauja vai notikumu nosūtīšana un noklausīšanās, katrs no šiem komponentiem nosūtīs serverim atsevišķus pieprasījumus katrā aptaujā vai notikumā. Programmā Livewire v3 ir inteliģenta pieprasījumu grupēšana, lai nodrošinātu: aptaujas, notikumus, klausītājus un metodes izsaukumus var apvienot vienā pieprasījumā, kad iespējams, saglabājot vēl vairāk pieprasījumu un uzlabojot sniegumu.
6. Reaktīvās īpašības
Livewire v3, kad jūs nodod datu daļu bērna komponentam , pievienojiet/\*_ @prop _/ komentāru virs rekvizīta bērnā, pēc tam atjauniniet to vecākkomponentā, tas tiks atjaunināts bērnkomponentā.
<?php
nosaukumvietaApp\Http\Livewire;
klasēTodosCountpagarina \Livewire\Komponents{
/** @prop */
publiski $todos;
publiskifunkcijurenderēt(){
atgriezties <<<'HTML'
<div>
Uzdevumi: {{ count($todos) }}
</div>
HTML;
}
}7. Piekļūstiet vecāku komponenta datiem un metodēm, izmantojot $parent
Programmā Livewire v3 būs jauns veids, kā piekļūt vecākkomponenta datiem un metodēm. Ir jauns $parent rekvizīts, kuram var piekļūt, lai izsauktu vecākvērtnes metodes.
<?php
nosaukumvietaApp\Http\Livewire;
klasēTodoInputpagarina \Livewire\Komponents{
/** @modelējams */
publiski $vērtība = '';
publiskifunkcijurenderēt(){
atgriezties <<<'HTML'
<div>
<ievades vads: modelis="vērtību" vads: keydown.enter="$parent.add()">
</div>
HTML;
}
}8. Teleportēties
Livewire v3 ietvers arī jaunu @teleport Blade direktīvu, kas ļaus "teleportēt" marķējuma daļu un padarīt to par citu DOM daļu. Tas dažreiz var palīdzēt izvairīties no z indeksa problēmām ar modāliem un izbīdījumiem.
<div>
<pogas vads: klikšķis="showModal">Rādīt modālu</button>
@teleportēties('#footer')
<x-modal vads: modelis="showModal">
<!--... -->
</x-modal>
@endteleport
</div>9. Slinkas sastāvdaļas
Programmā Livewire v3, renderējot komponentu, vienkārši pievienojiet slinko atribūtu, un tas sākotnēji netiks renderēts. Kad runa ir par skata logu, Livewire aktivizēs pieprasījumu to renderēt. Viettura saturu varēsiet pievienot arī, ieviešot savā komponentā viettura metodi.
<div>
<pogas vads: klikšķis="showModal">Rādīt modālu</button>
@teleportēties('#footer')
<x-modal vads: modelis="showModal">
<livewire: piemērs-komponents slinks />
</x-modal>
@endteleport
</div>
<?php
nosaukumvietaApp\Http\Livewire;
KlasePiemērsComponentpagarina \Livewire\Komponents{
publiskistatisksfunkcijuvietturis(){
atgriezties <<<'HTML'
<x-spinner />
>>>
}
publiski funkciju renderēt()/** [tl! sabrukt: 7] */{
atgriezties <<<'HTML'
<div>
Uzdevumi: {{count($todos) }}
</div>
HTML;
}
}
?>Livewire V3 vienkāršība un jauda
Vienkāršības un spēka kombinācija ir tas, kas padara to Laravels Livewire tik lieliski un kāpēc to izmanto tik daudzi izstrādātāji. Tā ir īpaši laba alternatīva Laravel + Inertia + Vue kombinācijai. Jo īpaši Laravel ir arī komplektā ar citiem ietvariem, kas ir spēcīgi un ar kuriem strādāt.
