Laravel Livewire is een geweldige tool om dynamisch gedrag op een webpagina te bereiken, zonder direct JavaScript-code te schrijven. Het maakt het bouwen van dynamische interfaces eenvoudig, zonder het comfort van Laravel te verlaten. Onlangs is de Livewire-kern volledig herschreven.

De nieuwe Livewire v3 heeft betere verschillen, functies kunnen sneller worden gebouwd en er is minder duplicatie tussen Livewire en Alpine omdat het meer afhankelijk is van Alpine en zijn Morph, History en andere gebruikt plug-ins. Verschillende van de nieuwe functies zijn ook mogelijk gemaakt door de codebase te herstructureren en meer nadruk te leggen op Alpine.

1. Livewire-scripts, -stijlen en Alpine automatisch injecteren

Nadat Composer Livewire v2 heeft geïnstalleerd, moet u handmatig @livewireStyles, @livewireScripts en Alpine aan uw lay-out toevoegen. Met Livewire v3 hoef je alleen maar Livewire te installeren en alles wat je nodig hebt wordt automatisch toegevoegd - inclusief Alpine!

<!DOCTYPE html>
<html lang=
"nl">
<hoofd>
<script src="//unpkg.com/alpinejs" verschuiven></script>
@livewireStyles@livewireScripts
</head>
<lichaam>
 ...
</body>
</html>

2. JavaScript-functies in PHP-klassen

Livewire v3 ondersteunt het schrijven van JavaScript-functies rechtstreeks in uw backend Livewire-componenten. Voeg een functie toe aan je component, voeg een /\*_ @js _/ commentaar toe boven de functie, retourneer vervolgens wat JavaScript-code met behulp van de HEREDOC-syntaxis van PHP en roep deze aan vanuit je frontend. De JavaScript-code wordt uitgevoerd zonder verzoeken naar uw backend te sturen.

<?php
naamruimteapp\Http\Livedraad;
klasTakenstrekt zich uit \Livedraad\Onderdeel
{
/** @prop */
openbaar $taken;
/** @js */
openbaarfunctieduidelijk()
 {
 opbrengst <<<'JS'
 dit.todo = '';
 JS;
 }
}
?>
<div>
<invoerdraad: model="Te doen" />
<knop draad: klik="duidelijk">Duidelijk</button>
</div>

3. Vergrendelde eigenschappen

Livewire v3 ondersteunt vergrendelde eigenschappen - eigenschappen die niet kunnen worden bijgewerkt vanaf de frontend. Voeg een /\*\* @locked / opmerking toe boven een eigenschap van uw component, en Livewire genereert een uitzondering als iemand probeert die eigenschap vanaf de frontend bij te werken.

<?php
naamruimteapp\Http\Livedraad;
klasTakenstrekt zich uit \Livedraad\Onderdeel
{
/** @op slot */
openbaar $todos = [];
}
?>

4. Draad: model wordt standaard uitgesteld

Naarmate Livewire en het gebruik ervan zijn geëvolueerd, hebben we ons gerealiseerd dat het "uitgestelde" gedrag logischer is voor 95% van de formulieren, dus in v3 zal de "uitgestelde" functionaliteit de standaard zijn. Dit bespaart onnodige verzoeken naar uw server en verbetert de prestaties. Wanneer u de "live"-functionaliteit op een ingang nodig hebt, kunt u wire: model.live gebruiken om die functionaliteit in te schakelen.

Dit is een van de weinige belangrijke wijzigingen van v2 naar v3.

5. Verzoeken worden gegroepeerd

In Livewire v2, als je meerdere componenten hebt die wire gebruiken: poll of verzending en luisteren naar gebeurtenissen, zal elk van die componenten afzonderlijke verzoeken naar de server sturen bij elke peiling of elk evenement. In Livewire v3 is er een intelligente batching van verzoeken zodat wire: peilingen, evenementen, luisteraars en methodeaanroepen kunnen indien mogelijk in één verzoek worden samengevoegd, waardoor nog meer verzoeken worden opgeslagen en verbeterd prestatie.

6. reactieve eigenschappen

In Livewire v3, wanneer u een stuk gegevens doorgeven aan een onderliggende component , voeg een/\*_ @prop _/ opmerking toe boven de eigenschap in het onderliggende onderdeel en werk het vervolgens bij in het bovenliggende onderdeel. Het wordt bijgewerkt in het onderliggende onderdeel.

<?php
naamruimteapp\Http\Livedraad;
klasTodosCountstrekt zich uit \Livedraad\Onderdeel{
/** @prop */
openbaar $taken;
openbaarfunctieveroorzaken(){
 opbrengst <<<'HTML'
<div>
 Taken: {{ count($todos) }}
</div>
 HTML;
 }
 }

7. Krijg toegang tot de gegevens en methoden van de bovenliggende component met behulp van $parent

In Livewire v3 komt er een nieuwe manier om toegang te krijgen tot de gegevens en methoden van een oudercomponent. Er is een nieuwe eigenschap $parent die toegankelijk is voor het aanroepen van methoden op de ouder.

<?php
naamruimteapp\Http\Livedraad;
klasTodoInvoerstrekt zich uit \Livedraad\Onderdeel{
/** @modeleerbaar */
openbaar $waarde = '';
openbaarfunctieveroorzaken(){
 opbrengst <<<'HTML'
<div>
<invoerdraad: model="waarde" draad: keydown.enter="$parent.add()">
</div>
 HTML;
 }
 }

8. Teleporteren

Livewire v3 zal ook een nieuwe @teleport Blade-richtlijn bevatten waarmee je een stuk markup kunt "teleporteren" en het een ander onderdeel van de DOM kunt maken. Dit kan soms helpen om z-indexproblemen met modals en slideouts te voorkomen.

<div>
<knop draad: klik="showModal">Toon modaal</button>
@teleport('#voettekst&apos;)
<x-modale draad: model="showModal">
<!--... -->
</x-modal>
@endteleport
</div>

9. Luie componenten

Voeg in Livewire v3 gewoon een lui attribuut toe bij het renderen van een component, en het zal in eerste instantie niet worden gerenderd. Wanneer het in de viewport komt, zal Livewire een verzoek afvuren om het weer te geven. U kunt ook tijdelijke aanduiding-inhoud toevoegen door de methode voor tijdelijke aanduiding op uw component te implementeren.

<div>
<knop draad: klik="showModal">Toon modaal</button>
@teleport('#voettekst&apos;)
<x-modale draad: model="showModal">
<livewire: voorbeeldcomponent lui />
</x-modal>
@endteleport
</div>
<?php
naamruimteapp\Http\Livedraad;
KlasVoorbeeldcomponentstrekt zich uit \Livedraad\Onderdeel{
openbaarstatischfunctietijdelijke aanduiding(){
opbrengst <<<'HTML'
<x-spinner />
>>>
}
openbaar functie veroorzaken()/** [tl! ineenstorting: 7] */{
 opbrengst <<<'HTML'
<div>
 Taken: {{count($todos) }}
</div>
 HTML;
 }
}
?>

Eenvoud en kracht in Livewire V3

De combinatie van eenvoud en kracht is wat maakt Laravel LiveWire zo geweldig en waarom het door zoveel ontwikkelaars wordt gebruikt. Het is vooral een goed alternatief voor de combinatie Laravel + Inertia + Vue. Met name Laravel is ook gebundeld met andere frameworks die krachtig zijn en om mee te werken.