Laravel Livewire är ett utmärkt verktyg för att uppnå dynamiskt beteende på en webbsida, utan att direkt skriva JavaScript-kod. Det gör det enkelt att bygga dynamiska gränssnitt, utan att lämna Laravels komfort. Nyligen har Livewire-kärnan skrivits om helt.
Den nya Livewire v3 har bättre skillnader, funktioner kan byggas snabbare och det finns mindre dubbelarbete mellan Livewire och Alpine eftersom det förlitar sig mer på Alpine och använder dess Morph, History och annat plugins. Flera av de nya funktionerna möjliggjordes också genom att omstrukturera kodbasen och lägga större tonvikt på Alpine.
1. Injicera Livewire-skript, stilar och Alpine automatiskt
Efter att kompositören har installerat Livewire v2 måste du manuellt lägga till @livewireStyles, @livewireScripts och Alpine till din layout. Med Livewire v3 behöver du bara installera Livewire och allt du behöver injiceras automatiskt - inklusive Alpine!
<!DOCTYPE html>
<html lang="sv">
<huvud>
<script src="//unpkg.com/alpinejs" uppskjuta></script>
@livewireStyles@livewireScripts
</head>
<kropp>
...
</body>
</html>2. JavaScript-funktioner i PHP-klasser
Livewire v3 kommer att stödja att skriva JavaScript-funktioner direkt i dina backend Livewire-komponenter. Lägg till en funktion till din komponent, lägg till en /\*_ @js _/ kommentar ovanför funktionen, returnera sedan lite JavaScript-kod med PHP: s HEREDOC-syntax och anropa den från din frontend. JavaScript-koden kommer att köras utan att skicka några förfrågningar till din backend.
<?php
namnutrymmeApp\Http\Livewire;
klassTodossträcker sig \Livewire\Komponent
{
/** @stötta */
offentlig $todos;
/** @js */
offentligfungeraklar()
{
lämna tillbaka <<<'JS'
this.todo = '';
JS;
}
}
?>
<div>
<ingångsledning: modell="att göra" />
<knapptråd: klicka="klar">Klar</button>
</div>3. Låsta egenskaper
Livewire v3 kommer att stödja låsta egenskaper - egenskaper som inte kan uppdateras från frontend. Lägg till en /\*\* @locked / kommentar ovanför en egenskap på din komponent, så kommer Livewire att skapa ett undantag om någon försöker uppdatera den egenskapen från frontend.
<?php
namnutrymmeApp\Http\Livewire;
klassTodossträcker sig \Livewire\Komponent
{
/** @låst */
offentlig $todos = [];
}
?>4. Wire: modellen är uppskjuten som standard
Allt eftersom Livewire och dess användning har utvecklats har vi insett att det "uppskjutna" beteendet är mer vettigt för 95 % av formulären, så i v3 kommer "uppskjuten" funktionalitet att vara standard. Detta kommer att spara onödiga förfrågningar som går till din server och förbättra prestandan. När du behöver "live"-funktionen på en ingång kan du använda wire: model.live för att aktivera den funktionen.
Detta är en av de mycket få förändringarna från v2 till v3.
5. Förfrågningar är batchade
I Livewire v2, om du har flera komponenter som använder tråd: poll eller skickar ut och lyssnar efter evenemang, kommer var och en av dessa komponenter att skicka separata förfrågningar till servern vid varje omröstning eller händelse. I Livewire v3 finns det intelligent batchning av förfrågningar så att: omröstningar, evenemang, lyssnare och metodanrop kan grupperas i en begäran när det är möjligt, vilket sparar ännu fler förfrågningar och förbättrar prestanda.
6. Reaktiva egenskaper
I Livewire v3, när du skicka en bit data till en underordnad komponent , lägg till en/\*_ @prop _/ kommentar ovanför egenskapen i den underordnade komponenten, uppdatera den sedan i den överordnade komponenten, den kommer att uppdateras i den underordnade komponenten.
<?php
namnutrymmeApp\Http\Livewire;
klassTodosCountsträcker sig \Livewire\Komponent{
/** @stötta */
offentlig $todos;
offentligfungeraframställa(){
lämna tillbaka <<<'HTML'
<div>
Att göra: {{ count($todos) }}
</div>
HTML;
}
}7. Få åtkomst till föräldrakomponentens data och metoder med $parent
I Livewire v3 kommer det att finnas ett nytt sätt att komma åt en överordnad komponents data och metoder. Det finns en ny $parent-egenskap som kan nås för anropsmetoder på föräldern.
<?php
namnutrymmeApp\Http\Livewire;
klassTodoInputsträcker sig \Livewire\Komponent{
/** @modellerbar */
offentlig $värde = '';
offentligfungeraframställa(){
lämna tillbaka <<<'HTML'
<div>
<ingångsledning: modell="värde" tråd: keydown.enter="$parent.add()">
</div>
HTML;
}
}8. Teleportera
Livewire v3 kommer också att inkludera ett nytt @teleport Blade-direktiv som gör att du kan "teleportera" en del av markeringen och återge den till en annan del av DOM. Detta kan ibland hjälpa till att undvika z-indexproblem med modals och slideouts.
<div>
<knapptråd: klicka="showModal">Visa modal</button>
@teleport('#sidfot')
<x-modal tråd: modell="showModal">
<!--... -->
</x-modal>
@endteleport
</div>9. Lata komponenter
I Livewire v3, lägg bara till ett lazy-attribut när du renderar en komponent, så kommer det inte att renderas initialt. När den kommer in i visningsporten kommer Livewire att avfyra en begäran om att återge den. Du kommer också att kunna lägga till platshållarinnehåll genom att implementera platshållarmetoden på din komponent.
<div>
<knapptråd: klicka="showModal">Visa modal</button>
@teleport('#sidfot')
<x-modal tråd: modell="showModal">
<livewire: exempel-komponent lazy />
</x-modal>
@endteleport
</div>
<?php
namnutrymmeApp\Http\Livewire;
KlassExempelkomponentsträcker sig \Livewire\Komponent{
offentligstatiskfungeraPlatshållare(){
lämna tillbaka <<<'HTML'
<x-spinnare />
>>>
}
offentlig fungera framställa()/** [tl! kollapsa: 7] */{
lämna tillbaka <<<'HTML'
<div>
Att göra: {{count($todos) }}
</div>
HTML;
}
}
?>Enkelhet och kraft i Livewire V3
Kombinationen av enkelhet och kraft är det som gör Laravel Livewire så fantastiskt och varför det används av så många utvecklare. Det är särskilt ett bra alternativ till kombinationen Laravel + Inertia + Vue. I synnerhet Laravel är också buntad med andra ramverk som är kraftfulla och att arbeta med.
