A Laravel Livewire egy nagyszerű eszköz a weboldal dinamikus viselkedésének elérésére anélkül, hogy közvetlenül JavaScript-kódot kellene írni. Egyszerűvé teszi a dinamikus interfészek felépítését anélkül, hogy elhagyná a Laravel kényelmét. Nemrég teljesen átírták a Livewire magot.

Az új Livewire v3 jobb differenciálással rendelkezik, a funkciók gyorsabban építhetők fel, és kevesebb a duplikáció A Livewire és az Alpine között, mert jobban támaszkodik az Alpine-ra, és használja a Morph-ját, a History-t és egyebeket bővítmények. Számos új funkciót a kódbázis átalakítása és az Alpine-ra való nagyobb hangsúly helyezése is lehetővé tett.

1. Injektálja be automatikusan a Livewire szkripteket, stílusokat és Alpine-t

Miután a zeneszerző telepítette a Livewire v2-t, manuálisan kell hozzáadnia a @livewireStyles, @livewireScripts és Alpine elemeket az elrendezéshez. A Livewire v3-mal csak telepítenie kell a Livewire-t, és minden, amire szüksége van, automatikusan befecskendeződik – beleértve az Alpine-t is!

<!DOCTYPE html>
<html lang="hu">
<fej>
<script src="//unpkg.com/alpinejs" elhalasztja></script>
@livewireStyles@livewireScripts
</head>
<test>
 ...
</body>
</html>

2. JavaScript függvények PHP osztályokban

A Livewire v3 támogatja a JavaScript függvények írását közvetlenül a Livewire háttér-összetevőibe. Adjon hozzá egy függvényt az összetevőhöz, adjon hozzá egy /\*_ @js _/ megjegyzést a függvény fölé, majd térjen vissza JavaScript kóddal a PHP HEREDOC szintaxisával, és hívja meg a frontendről. A JavaScript kód végrehajtásra kerül anélkül, hogy kéréseket küldene a háttérrendszernek.

<?php
névtérApp\Http\Feszültség alatt lévő vezeték;
osztályTodoskiterjed \Feszültség alatt lévő vezeték\Összetevő
{
/** @támaszt */
nyilvános $todos;
/** @js */
nyilvánosfunkcióegyértelmű()
 {
 Visszatérés <<<'JS'
 ezt.todo = '';
 JS;
 }
}
?>
<div>
<bemeneti vezeték: modell="csinálni" />
<gomb vezeték: kattintás="egyértelmű">Egyértelmű</button>
</div>

3. Zárolt tulajdonságok

A Livewire v3 támogatja a zárolt tulajdonságokat – olyan tulajdonságokat, amelyek nem frissíthetők a frontendről. Adjon hozzá egy /\*\* @locked / megjegyzést az összetevő egy tulajdonsága fölé, és a Livewire kivételt fog dobni, ha valaki megpróbálja frissíteni a tulajdonságot a frontendről.

<?php
névtérApp\Http\Feszültség alatt lévő vezeték;
osztályTodoskiterjed \Feszültség alatt lévő vezeték\Összetevő
{
/** @zárt */
nyilvános $todos = [];
}
?>

4. Vezeték: a modell alapértelmezés szerint késleltetett

Ahogy a Livewire és használata fejlődött, rájöttünk, hogy a „halasztott” viselkedés az űrlapok 95%-ánál értelmesebb, így a v3-ban a „halasztott” funkció lesz az alapértelmezett. Ezzel megspórolhatja a szerverére érkező szükségtelen kéréseket, és javíthatja a teljesítményt. Ha szüksége van az "élő" funkcióra egy bemeneten, használhatja a vezetéket: model.live a funkció engedélyezéséhez.

Ez egyike a nagyon kevés áttörésnek a v2-ről v3-ra.

5. A kérések csoportosítva vannak

A Livewire v2-ben, ha több vezetéket használó összetevője van: poll vagy események feladása és meghallgatása, ezen összetevők mindegyike külön kéréseket küld a szervernek minden egyes szavazásnál vagy eseménynél. A Livewire v3-ban a kérések intelligens kötegelése, így a szavazások, események, hallgatók és A metódushívások lehetőség szerint egy kérésbe csoportosíthatók, így még több kérést takaríthatunk meg és javíthatunk teljesítmény.

6. Reaktív tulajdonságok

A Livewire v3-ban, amikor Ön adjon át egy adatot egy gyermekkomponensnek , adjon hozzá egy/\*_ @prop _/ megjegyzést a tulajdonság fölé a gyermekben, majd frissítse a szülőkomponensben, a gyermekkomponensben frissül.

<?php
névtérApp\Http\Feszültség alatt lévő vezeték;
osztályTodosCountkiterjed \Feszültség alatt lévő vezeték\Összetevő{
/** @támaszt */
nyilvános $todos;
nyilvánosfunkcióVakol(){
 Visszatérés <<<'HTML'
<div>
 Teendők: {{ count($todos) }}
</div>
 HTML;
 }
 }

7. Hozzáférés a szülőkomponens adataihoz és módszereihez a $parent használatával

A Livewire v3-ban új módja lesz a szülőkomponens adatainak és metódusainak elérésének. Egy új $parent tulajdonság érhető el a szülő metódusainak meghívására.

<?php
névtérApp\Http\Feszültség alatt lévő vezeték;
osztályTodoInputkiterjed \Feszültség alatt lévő vezeték\Összetevő{
/** @modellezhető */
nyilvános $érték = '';
nyilvánosfunkcióVakol(){
 Visszatérés <<<'HTML'
<div>
<bemeneti vezeték: modell="érték" vezeték: keydown.enter="$parent.add()">
</div>
 HTML;
 }
 }

8. Teleportál

A Livewire v3 tartalmazni fog egy új @teleport Blade direktívát is, amely lehetővé teszi, hogy "teleportáljon" egy darab jelölést, és a DOM másik részévé tegye. Ez néha segíthet elkerülni a z-index-problémákat a modális és a kicsúszás esetén.

<div>
<gomb vezeték: kattintás="showModal">Mutasd a modálist</button>
@teleportál('#lábléc&apos;)
<x-modális vezeték: modell="showModal">
<!--... -->
</x-modal>
@endteleport
</div>

9. Lusta alkatrészek

A Livewire v3-ban csak adjon hozzá egy lazy attribútumot egy komponens renderelésekor, és az eredetileg nem jelenik meg. Amikor a nézetablakba kerül, a Livewire egy kérést indít el annak megjelenítésére. Helyőrző-tartalmat is hozzáadhat, ha implementálja a helyőrző módszert az összetevőn.

<div>
<gomb vezeték: kattintás="showModal">Mutasd a modálist</button>
@teleportál('#lábléc&apos;)
<x-modális vezeték: modell="showModal">
<livewire: példa-összetevő lusta />
</x-modal>
@endteleport
</div>
<?php
névtérApp\Http\Feszültség alatt lévő vezeték;
OsztályPéldaComponentkiterjed \Feszültség alatt lévő vezeték\Összetevő{
nyilvánosstatikusfunkcióhelykitöltő(){
Visszatérés <<<'HTML'
<x-spinner />
>>>
}
nyilvános funkció Vakol()/** [tl! összeomlás: 7] */{
 Visszatérés <<<'HTML'
<div>
 Teendők: {{count($todos) }}
</div>
 HTML;
 }
}
?>

Egyszerűség és teljesítmény a Livewire V3-ban

Az egyszerűség és az erő kombinációja teszi Laravel Livewire olyan fantasztikus, és miért használja olyan sok fejlesztő. Különösen jó alternatíva a Laravel + Inertia + Vue kombinációhoz. Különösen a Laravel más keretrendszerekkel is össze van kötve, amelyek hatékonyak és használhatók.