Laravel Livewire je odlično orodje za doseganje dinamičnega obnašanja na spletni strani, brez neposrednega pisanja kode JavaScript. Poenostavi gradnjo dinamičnih vmesnikov, ne da bi zapustili udobje Laravela. Pred kratkim je bilo jedro Livewire popolnoma prepisano.

Novi Livewire v3 ima boljše razlike, funkcije je mogoče zgraditi hitreje in manj je podvajanja med Livewire in Alpine, ker se bolj zanaša na Alpine in uporablja njen Morph, History in drugo vtičniki. Več novih funkcij je omogočilo tudi prestrukturiranje kodne baze in večji poudarek na Alpine.

1. Samodejno vnesite skripte, sloge in Alpine Livewire

Ko skladatelj namesti Livewire v2, morate svoji postavitvi ročno dodati @livewireStyles, @livewireScripts in Alpine. Z Livewire v3 morate samo namestiti Livewire in vse, kar potrebujete, se samodejno vstavi - vključno z Alpine!

<!DOCTYPE html>
<html lang="en">
<glavo>
<skript src="//unpkg.com/alpinejs" odložiti></script>
@livewireStyles@livewireScripts
</head>
<telo>
 ...
</body>
</html>

2. Funkcije JavaScript v razredih PHP

instagram viewer

Livewire v3 bo podpiral pisanje funkcij JavaScript neposredno v vaše zaledne komponente Livewire. Svoji komponenti dodajte funkcijo, nad funkcijo dodajte komentar /\*_ @js _/, nato vrnite kodo JavaScript s sintakso HEREDOC PHP in jo pokličite iz svojega vmesnika. Koda JavaScript bo izvedena brez pošiljanja kakršnih koli zahtev vašemu zaledju.

<?php
imenski prostoraplikacija\Http\Livewire;
razredTodosse razteza \Livewire\Komponenta
{
/** @prop */
javnosti $todos;
/** @js */
javnostifunkcijojasno()
 {
 vrnitev <<<'JS'
 this.todo = '';
 JS;
 }
}
?>
<div>
<vhodna žica: model="narediti" />
<žica gumba: klik="jasno">jasno</button>
</div>

3. Zaklenjene lastnosti

Livewire v3 bo podpiral zaklenjene lastnosti – lastnosti, ki jih ni mogoče posodobiti s čelne strani. Dodajte /\*\* @locked / komentar nad lastnostjo vaše komponente in Livewire bo sprožil izjemo, če bo nekdo poskušal posodobiti to lastnost iz sprednjega dela.

<?php
imenski prostoraplikacija\Http\Livewire;
razredTodosse razteza \Livewire\Komponenta
{
/** @zaklenjeno */
javnosti $todos = [];
}
?>

4. Žica: model je privzeto odložen

Ko sta se Livewire in njegova uporaba razvijala, smo ugotovili, da je »odloženo« vedenje bolj smiselno za 95 % obrazcev, zato bo v v3 »odložena« funkcionalnost privzeta. To bo prihranilo pri nepotrebnih zahtevah, ki gredo na vaš strežnik, in izboljšalo delovanje. Ko potrebujete funkcijo "v živo" na vhodu, lahko uporabite wire: model.live, da omogočite to funkcijo.

To je ena redkih prelomnih sprememb iz v2 v v3.

5. Zahteve so združene

V Livewire v2, če imate več komponent, ki uporabljajo žico: anketa oz dispečiranje in poslušanje dogodkov, bo vsaka od teh komponent poslala ločene zahteve strežniku ob vsaki anketi ali dogodku. V Livewire v3 obstaja inteligentno združevanje zahtev, tako da povezujejo: ankete, dogodke, poslušalce in klice metod je mogoče združiti v eno zahtevo, kadar je to mogoče, s čimer prihranite še več zahtev in izboljšate izvedba.

6. Reaktivne lastnosti

V Livewire v3, ko ste posreduje del podatkov podrejeni komponenti , dodajte komentar/\*_ @prop _/ nad lastnostjo v podrejenem elementu, nato ga posodobite v nadrejeni komponenti, posodobljen bo v podrejeni komponenti.

<?php
imenski prostoraplikacija\Http\Livewire;
razredTodosCountse razteza \Livewire\Komponenta{
/** @prop */
javnosti $todos;
javnostifunkcijoupodabljati(){
 vrnitev <<<'HTML'
<div>
 Todos: {{ count($todos) }}
</div>
 HTML;
 }
 }

7. Dostopajte do podatkov in metod nadrejene komponente z $parent

V Livewire v3 bo na voljo nov način za dostop do podatkov in metod nadrejene komponente. Obstaja nova lastnost $parent, do katere lahko dostopate za klicanje metod nadrejenega.

<?php
imenski prostoraplikacija\Http\Livewire;
razredTodoInputse razteza \Livewire\Komponenta{
/** @modelable */
javnosti $vrednost = '';
javnostifunkcijoupodabljati(){
 vrnitev <<<'HTML'
<div>
<vhodna žica: model="vrednost" žica: keydown.enter="$parent.add()">
</div>
 HTML;
 }
 }

8. Teleport

Livewire v3 bo vključeval tudi novo direktivo @teleport Blade, ki vam bo omogočila, da "teleportirate" del oznake in ga upodabljate kot drug del DOM. S tem se včasih lahko izognete težavam z-indeksom z modali in drsniki.

<div>
<žica gumba: klik="showModal">Pokaži modalno</button>
@teleport('#noga&apos;)
<x-modalna žica: model="showModal">
<!--... -->
</x-modal>
@endteleport
</div>

9. Lene komponente

V Livewire v3 samo dodajte leni atribut pri upodabljanju komponente in na začetku ne bo upodobljena. Ko pride v vidno polje, bo Livewire sprožil zahtevo za njegovo upodabljanje. Dodali boste lahko tudi vsebino nadomestnega znaka z implementacijo metode nadomestnega znaka na svoji komponenti.

<div>
<žica gumba: klik="showModal">Pokaži modalno</button>
@teleport('#noga&apos;)
<x-modalna žica: model="showModal">
<livewire: primer-komponenta lazy />
</x-modal>
@endteleport
</div>
<?php
imenski prostoraplikacija\Http\Livewire;
RazredPrimerKomponentese razteza \Livewire\Komponenta{
javnostistatičnafunkcijorezervirano mesto(){
vrnitev <<<'HTML'
<x-spinner />
>>>
}
javnosti funkcijo upodabljati()/** [tl! strni: 7] */{
 vrnitev <<<'HTML'
<div>
 Todos: {{count($todos) }}
</div>
 HTML;
 }
}
?>

Preprostost in moč v Livewire V3

Kombinacija preprostosti in moči je tisto, kar naredi Laravel Livewire tako super in zakaj ga uporablja toliko razvijalcev. Še posebej je dobra alternativa kombinaciji Laravel + Inertia + Vue. Zlasti Laravel je povezan tudi z drugimi ogrodji, ki so zmogljiva in z njimi lahko delate.