Laravel Livewire je skvelý nástroj na dosiahnutie dynamického správania na webovej stránke bez priameho písania kódu JavaScript. Vytvára jednoduché dynamické rozhrania bez toho, aby ste opustili pohodlie Laravelu. Nedávno bolo jadro Livewire úplne prepísané.
Nový Livewire v3 má lepší rozdiel, funkcie sa dajú vytvárať rýchlejšie a je tu menšia duplicita medzi Livewire a Alpine, pretože sa viac spolieha na Alpine a využíva jeho Morph, History a iné pluginy. Niekoľko nových funkcií umožnila aj reštrukturalizácia kódovej základne a väčší dôraz na Alpine.
1. Automaticky vkladať skripty Livewire, štýly a Alpine
Po inštalácii skladateľa Livewire v2 musíte do svojho rozloženia manuálne pridať @livewireStyles, @livewireScripts a Alpine. S Livewire v3 si stačí nainštalovať Livewire a všetko, čo potrebujete, sa automaticky vstrekne – vrátane Alpine!
<!DOCTYPE html>
<html jazyk="en">
<hlavu>
<skript src="//unpkg.com/alpinejs" odložiť></script>
@livewireStyles@livewireScripts
</head>
<telo>
...
</body>
</html>2. Funkcie JavaScriptu v triedach PHP
Livewire v3 bude podporovať písanie funkcií JavaScriptu priamo vo vašich backend komponentoch Livewire. Pridajte funkciu do svojho komponentu, pridajte komentár /\*_ @js _/ nad funkciu, potom vráťte nejaký JavaScript kód pomocou PHP syntaxe HEREDOC a zavolajte ho z vášho frontendu. Kód JavaScript sa spustí bez odosielania akýchkoľvek požiadaviek na váš backend.
<?php
menný priestorApp\HTTP\Drôt pod prúdom;
triedaTodospredlžuje \Drôt pod prúdom\Komponent
{
/** @prop */
verejnosti $todos;
/** @js */
verejnostifunkciujasný()
{
vrátiť <<<'JS'
toto.todo = '';
JS;
}
}
?>
<div>
<vstupný vodič: model="robiť" />
<gombíkový drôt: kliknutie="jasný">jasný</button>
</div>3. Uzamknuté vlastnosti
Livewire v3 bude podporovať uzamknuté vlastnosti – vlastnosti, ktoré nemožno aktualizovať z frontendu. Pridajte komentár /\*\* @locked / nad vlastnosť na vašom komponente a Livewire vyvolá výnimku, ak sa niekto pokúsi aktualizovať túto vlastnosť z frontendu.
<?php
menný priestorApp\HTTP\Drôt pod prúdom;
triedaTodospredlžuje \Drôt pod prúdom\Komponent
{
/** @uzamknuté */
verejnosti $todos = [];
}
?>4. Drôt: model je predvolene odložený
Ako sa Livewire a jeho používanie vyvíjali, uvedomili sme si, že „odložené“ správanie dáva väčší zmysel pre 95 % formulárov, takže vo verzii 3 bude „odložená“ funkcia predvolená. Ušetríte tým zbytočné požiadavky smerujúce na váš server a zlepšíte výkon. Ak potrebujete na vstupe funkciu "naživo", na aktiváciu tejto funkcie môžete použiť wire: model.live.
Toto je jedna z mála prelomových zmien z v2 na v3.
5. Žiadosti sú dávkované
V Livewire v2, ak máte viacero komponentov pomocou drôtu: anketa alebo dispečing a počúvanie udalostí, každá z týchto súčastí odošle samostatné požiadavky na server pri každom prieskume alebo udalosti. V Livewire v3 existuje inteligentné dávkovanie žiadostí tak, aby sa prepojili: ankety, udalosti, poslucháči a volania metód môžu byť dávkované do jednej požiadavky, ak je to možné, čím sa ušetrí ešte viac požiadaviek a zlepší sa výkon.
6. Reaktívne vlastnosti
V Livewire v3, keď ste odovzdať časť údajov podriadenému komponentu , pridajte komentár/\*_ @prop _/ nad vlastnosť v podradenom komponente, potom ho aktualizujte v nadradenom komponente, aktualizuje sa v podradenom komponente.
<?php
menný priestorApp\HTTP\Drôt pod prúdom;
triedaTodosCountpredlžuje \Drôt pod prúdom\Komponent{
/** @prop */
verejnosti $todos;
verejnostifunkciuvykresliť(){
vrátiť <<<'HTML'
<div>
Úlohy: {{ count($todos) }}
</div>
HTML;
}
}7. Prístup k údajom a metódam nadradeného komponentu pomocou $parent
V Livewire v3 bude k dispozícii nový spôsob prístupu k údajom a metódam nadradeného komponentu. Existuje nová vlastnosť $parent, ku ktorej je možné pristupovať na volanie metód na rodičovi.
<?php
menný priestorApp\HTTP\Drôt pod prúdom;
triedaTodoInputpredlžuje \Drôt pod prúdom\Komponent{
/** @modelovateľný */
verejnosti $hodnota = '';
verejnostifunkciuvykresliť(){
vrátiť <<<'HTML'
<div>
<vstupný vodič: model="hodnotu" drôt: keydown.enter="$parent.add()">
</div>
HTML;
}
}8. Teleportovať sa
Livewire v3 bude obsahovať aj novú direktívu @teleport Blade, ktorá vám umožní „teleportovať“ časť označenia a urobiť z neho ďalšiu časť DOM. To môže niekedy pomôcť vyhnúť sa problémom s indexom z s modálmi a vysúvacími prvkami.
<div>
<gombíkový drôt: kliknutie="showModal">Zobraziť modálne</button>
@teleport('#päta')
<x-modálny drôt: model="showModal">
<!--... -->
</x-modal>
@endteleport
</div>9. Lazy komponenty
V Livewire v3 stačí pri vykresľovaní komponentu pridať atribút lenivý a ten sa na začiatku nevykreslí. Keď príde do výrezu, Livewire spustí požiadavku na vykreslenie. Zástupný obsah budete môcť pridať aj implementáciou metódy zástupného symbolu do vášho komponentu.
<div>
<gombíkový drôt: kliknutie="showModal">Zobraziť modálne</button>
@teleport('#päta')
<x-modálny drôt: model="showModal">
<livewire: príklad-komponent lenivý />
</x-modal>
@endteleport
</div>
<?php
menný priestorApp\HTTP\Drôt pod prúdom;
TriedaPríkladKomponentpredlžuje \Drôt pod prúdom\Komponent{
verejnostistatickéfunkciuzástupný symbol(){
vrátiť <<<'HTML'
<x-spinner />
>>>
}
verejnosti funkciu vykresliť()/** [tl! kolaps: 7] */{
vrátiť <<<'HTML'
<div>
Úlohy: {{count($todos) }}
</div>
HTML;
}
}
?>Jednoduchosť a výkon v Livewire V3
Kombinácia jednoduchosti a sily je to, čo robí Laravel Livewire také úžasné a prečo ho používa toľko vývojárov. Je to obzvlášť dobrá alternatíva ku kombinácii Laravel + Inertia + Vue. Najmä Laravel je tiež spojený s ďalšími rámcami, ktoré sú výkonné a s ktorými sa dá pracovať.
