Laravel Livewire izvrstan je alat za postizanje dinamičkog ponašanja na web stranici, bez izravnog pisanja JavaScript koda. Čini izradu dinamičkih sučelja jednostavnom, bez napuštanja udobnosti Laravela. Nedavno je jezgra Livewirea potpuno iznova napisana.
Novi Livewire v3 ima bolje razlike, značajke se mogu izgraditi brže i ima manje dupliranja između Livewirea i Alpinea jer se više oslanja na Alpine i koristi njegov Morph, History i ostalo dodaci. Nekoliko novih značajki također je omogućeno restrukturiranjem baze kodova i stavljanjem većeg naglaska na Alpine.
1. Automatski ubacite Livewire skripte, stilove i Alpine
Nakon što skladatelj instalira Livewire v2, morate ručno dodati @livewireStyles, @livewireScripts i Alpine u svoj izgled. Uz Livewire v3, samo trebate instalirati Livewire i sve što trebate automatski se ubacuje - uključujući Alpine!
<!DOCTYPE html>
<html lang="hr">
<glava>
<skripta src="//unpkg.com/alpinejs" odgoditi></script>
@livewireStyles@livewireScripts
</head>
<tijelo>
...
</body>
</html>2. JavaScript funkcije u PHP klasama
Livewire v3 podržava pisanje JavaScript funkcija izravno u vašim pozadinskim Livewire komponentama. Dodajte funkciju svojoj komponenti, dodajte /\*_ @js _/ komentar iznad funkcije, a zatim vratite neki JavaScript kod pomoću PHP-ove HEREDOC sintakse i pozovite ga iz svog sučelja. JavaScript kôd će se izvršiti bez slanja zahtjeva vašoj pozadini.
<?php
imenski prostoraplikacija\Http\Livewire;
razredaTodosproteže se \Livewire\komponenta
{
/** @prop */
javnost $todos;
/** @js */
javnostfunkcijačisto()
{
povratak <<<'JS'
ovo.todo = '';
JS;
}
}
?>
<div>
<ulazna žica: model="napraviti" />
<žica gumba: klik="čisto">Čisto</button>
</div>3. Zaključana svojstva
Livewire v3 će podržavati zaključana svojstva - svojstva koja se ne mogu ažurirati iz sučelja. Dodajte /\*\* @locked / komentar iznad svojstva na vašoj komponenti i Livewire će izbaciti iznimku ako netko pokuša ažurirati to svojstvo iz sučelja.
<?php
imenski prostoraplikacija\Http\Livewire;
razredaTodosproteže se \Livewire\komponenta
{
/** @zaključan */
javnost $todos = [];
}
?>4. Žica: model je zadano odgođen
Kako su se Livewire i njegova upotreba razvijali, shvatili smo da "odgođeno" ponašanje ima više smisla za 95% obrazaca, tako da će u v3 "odgođena" funkcija biti zadana. Ovo će uštedjeti na nepotrebnim zahtjevima koji idu vašem poslužitelju i poboljšati performanse. Kada trebate funkciju "uživo" na ulazu, možete upotrijebiti wire: model.live da omogućite tu funkciju.
Ovo je jedna od rijetkih ključnih promjena s v2 na v3.
5. Zahtjevi su grupirani
U Livewire v2, ako imate više komponenti koje koriste žicu: anketa ili otpremanje i osluškivanje događaja, svaka će od tih komponenti poslati zasebne zahtjeve poslužitelju za svaku anketu ili događaj. U Livewire v3, postoji inteligentno grupiranje zahtjeva tako da povezuju: ankete, događaje, slušatelje i pozivi metoda mogu se grupirati u jedan zahtjev kada je to moguće, čime se štedi još više zahtjeva i poboljšava izvođenje.
6. Reaktivna svojstva
U Livewire v3, kada vi proslijediti dio podataka podređenoj komponenti , dodajte komentar/\*_ @prop _/ iznad svojstva u podređenoj komponenti, zatim ga ažurirajte u nadređenoj komponenti, ažurirat će se u podređenoj komponenti.
<?php
imenski prostoraplikacija\Http\Livewire;
razredaTodosCountproteže se \Livewire\komponenta{
/** @prop */
javnost $todos;
javnostfunkcijaprikazati(){
povratak <<<'HTML'
<div>
Todos: {{ count($todos) }}
</div>
HTML;
}
}7. Pristupite podacima i metodama nadređene komponente koristeći $parent
U Livewire v3 postojat će novi način pristupa podacima i metodama nadređene komponente. Postoji novo svojstvo $parent kojem se može pristupiti za pozivanje metoda na roditelju.
<?php
imenski prostoraplikacija\Http\Livewire;
razredaTodoInputproteže se \Livewire\komponenta{
/** @modeliran */
javnost $vrijednost = '';
javnostfunkcijaprikazati(){
povratak <<<'HTML'
<div>
<ulazna žica: model="vrijednost" žica: keydown.enter="$parent.add()">
</div>
HTML;
}
}8. Teleportirati
Livewire v3 također će uključivati novu direktivu @teleport Blade koja će vam omogućiti da "teleportirate" dio oznake i pretvorite ga u drugi dio DOM-a. To ponekad može pomoći u izbjegavanju problema sa z-indeksom s modalima i klizačima.
<div>
<žica gumba: klik="showModal">Prikaži modal</button>
@teleport('#podnožje')
<x-modalna žica: model="showModal">
<!--... -->
</x-modal>
@endteleport
</div>9. Lijene komponente
U Livewire v3 samo dodajte lijeni atribut prilikom renderiranja komponente i ona se neće renderirati u početku. Kada dođe u prozor za prikaz, Livewire će pokrenuti zahtjev za renderiranje. Također ćete moći dodati sadržaj rezerviranog mjesta implementacijom metode rezerviranog mjesta na svojoj komponenti.
<div>
<žica gumba: klik="showModal">Prikaži modal</button>
@teleport('#podnožje')
<x-modalna žica: model="showModal">
<livewire: primjer-komponenta lijena />
</x-modal>
@endteleport
</div>
<?php
imenski prostoraplikacija\Http\Livewire;
KlasaPrimjerKomponenteproteže se \Livewire\komponenta{
javnoststatičkifunkcijarezerviranog mjesta(){
povratak <<<'HTML'
<x-spinner />
>>>
}
javnost funkcija prikazati()/** [tl! sažimanje: 7] */{
povratak <<<'HTML'
<div>
Todos: {{count($todos) }}
</div>
HTML;
}
}
?>Jednostavnost i snaga u Livewire V3
Kombinacija jednostavnosti i snage je ono što čini Laravel Livewire tako super i zašto ga koristi toliko mnogo programera. Posebno je dobra alternativa kombinaciji Laravel + Inertia + Vue. Konkretno, Laravel je također povezan s drugim okvirima koji su moćni i s kojima se može raditi.