Laravel Livewire er et flott verktøy for å oppnå dynamisk oppførsel på en nettside, uten å skrive JavaScript-kode direkte. Det gjør det enkelt å bygge dynamiske grensesnitt, uten å forlate komforten til Laravel. Nylig har Livewire-kjernen blitt fullstendig omskrevet.

Den nye Livewire v3 har bedre diff, funksjoner kan bygges raskere, og det er mindre duplisering mellom Livewire og Alpine fordi den er mer avhengig av Alpine og bruker Morph, History og annet plugins. Flere av de nye funksjonene ble også muliggjort ved å restrukturere kodebasen og legge større vekt på Alpine.

1. Injiser Livewire-skript, stiler og Alpine automatisk

Etter at komponisten har installert Livewire v2, må du manuelt legge til @livewireStyles, @livewireScripts og Alpine til oppsettet ditt. Med Livewire v3 trenger du bare å installere Livewire og alt du trenger blir automatisk injisert - inkludert Alpine!

<!DOCTYPE html>
<html lang="no">
<hode>
<script src="//unpkg.com/alpinejs" utsette></script>
@livewireStyles@livewireScripts
</head>
<kropp>
 ...
</body>
</html>
instagram viewer

2. JavaScript-funksjoner i PHP-klasser

Livewire v3 vil støtte skriving av JavaScript-funksjoner direkte i dine backend Livewire-komponenter. Legg til en funksjon til komponenten din, legg til en /\*_ @js _/-kommentar over funksjonen, returner deretter litt JavaScript-kode ved å bruke PHPs HEREDOC-syntaks og kall den fra frontend. JavaScript-koden vil bli utført uten å sende noen forespørsler til din backend.

<?php
navneområdeApp\Http\Livewire;
klasseTodosstrekker \Livewire\Komponent
{
/** @rekvisitt */
offentlig $todos;
/** @js */
offentligfunksjonklar()
 {
 komme tilbake <<<'JS'
 this.todo = '';
 JS;
 }
}
?>
<div>
<inngangsledning: modell="å gjøre" />
<knappledning: klikk="klar">Klar</button>
</div>

3. Låste egenskaper

Livewire v3 vil støtte låste egenskaper - egenskaper som ikke kan oppdateres fra frontend. Legg til en /\*\* @locked / kommentar over en egenskap på komponenten din, og Livewire vil gi et unntak hvis noen prøver å oppdatere den egenskapen fra frontend.

<?php
navneområdeApp\Http\Livewire;
klasseTodosstrekker \Livewire\Komponent
{
/** @låst */
offentlig $todos = [];
}
?>

4. Ledning: modellen er utsatt som standard

Etter hvert som Livewire og bruken av det har utviklet seg, har vi innsett at "utsatt" oppførsel gir mer mening for 95 % av skjemaene, så i v3 vil "utsatt" funksjonalitet være standard. Dette vil spare på unødvendige forespørsler som går til serveren din og forbedre ytelsen. Når du trenger "live"-funksjonaliteten på en inngang, kan du bruke wire: model.live for å aktivere denne funksjonaliteten.

Dette er en av de svært få endringene fra v2 til v3.

5. Forespørsler er gruppert

I Livewire v2, hvis du har flere komponenter som bruker wire: poll eller utsendelse og lytting etter arrangementer, vil hver av disse komponentene sende separate forespørsler til serveren for hver avstemning eller hendelse. I Livewire v3 er det intelligent gruppering av forespørsler slik at overføring: meningsmålinger, arrangementer, lyttere og metodeanrop kan grupperes i én forespørsel når det er mulig, og sparer enda flere forespørsler og forbedrer opptreden.

6. Reaktive egenskaper

I Livewire v3, når du sende et stykke data til en underordnet komponent , legg til en/\*_ @prop _/ kommentar over egenskapen i underordnet, og oppdater den deretter i overordnet komponent, den vil bli oppdatert i underkomponenten.

<?php
navneområdeApp\Http\Livewire;
klasseTodosCountstrekker \Livewire\Komponent{
/** @rekvisitt */
offentlig $todos;
offentligfunksjongjengi(){
 komme tilbake <<<'HTML'
<div>
 Gjøremål: {{ count($todos) }}
</div>
 HTML;
 }
 }

7. Få tilgang til overordnet komponents data og metoder ved å bruke $parent

I Livewire v3 vil det være en ny måte å få tilgang til en overordnet komponents data og metoder. Det er en ny $parent-egenskap som du kan få tilgang til for anropsmetoder på overordnet.

<?php
navneområdeApp\Http\Livewire;
klasseTodoInputstrekker \Livewire\Komponent{
/** @modellerbar */
offentlig $verdi = '';
offentligfunksjongjengi(){
 komme tilbake <<<'HTML'
<div>
<inngangsledning: modell="verdi" wire: keydown.enter="$parent.add()">
</div>
 HTML;
 }
 }

8. Teleporter

Livewire v3 vil også inkludere et nytt @teleport Blade-direktiv som lar deg "teleportere" et stykke markering og gjengi det til en annen del av DOM. Dette kan noen ganger bidra til å unngå z-indeksproblemer med modaler og slideouts.

<div>
<knappledning: klikk="showModal">Vis modal</button>
@teleport('#bunntekst&apos;)
<x-modal ledning: modell="showModal">
<!--... -->
</x-modal>
@endteleport
</div>

9. Late komponenter

I Livewire v3, bare legg til et lazy-attributt når du gjengir en komponent, og det vil ikke bli gjengitt først. Når den kommer inn i viewporten, vil Livewire avfyre ​​en forespørsel om å gjengi den. Du vil også kunne legge til plassholderinnhold ved å implementere plassholdermetoden på komponenten.

<div>
<knappledning: klikk="showModal">Vis modal</button>
@teleport('#bunntekst&apos;)
<x-modal ledning: modell="showModal">
<livewire: eksempel-komponent lat />
</x-modal>
@endteleport
</div>
<?php
navneområdeApp\Http\Livewire;
KlasseEksempelkomponentstrekker \Livewire\Komponent{
offentligstatiskfunksjonplassholder(){
komme tilbake <<<'HTML'
<x-spinner />
>>>
}
offentlig funksjon gjengi()/** [tl! kollaps: 7] */{
 komme tilbake <<<'HTML'
<div>
 Gjøremål: {{count($todos) }}
</div>
 HTML;
 }
}
?>

Enkelhet og kraft i Livewire V3

Kombinasjonen av enkelhet og kraft er det som skaper Laravel Livewire så fantastisk og hvorfor det brukes av så mange utviklere. Det er spesielt et godt alternativ til kombinasjonen Laravel + Inertia + Vue. Spesielt Laravel er også buntet sammen med andre rammeverk som er kraftige og å jobbe med.