Laravel Livewire to świetne narzędzie do osiągnięcia dynamicznego zachowania na stronie internetowej, bez bezpośredniego pisania kodu JavaScript. Sprawia, że ​​budowanie dynamicznych interfejsów jest proste, bez wychodzenia z wygody Laravela. Ostatnio rdzeń Livewire został całkowicie przepisany.

Nowy Livewire v3 ma lepsze różnicowanie, funkcje można budować szybciej i jest mniej powielania między Livewire i Alpine, ponieważ bardziej opiera się na Alpine i wykorzystuje jego Morph, History i inne wtyczki. Kilka nowych funkcji było również możliwych dzięki restrukturyzacji bazy kodu i położeniu większego nacisku na Alpine.

1. Automatycznie wstrzykuj skrypty Livewire, style i Alpine

Po zainstalowaniu aplikacji Livewire v2 przez Composer musisz ręcznie dodać @livewireStyles, @livewireScripts i Alpine do swojego układu. Dzięki Livewire v3 wystarczy zainstalować Livewire, a wszystko, czego potrzebujesz, zostanie automatycznie wstrzyknięte - w tym Alpine!

<!DOCTYPE html>
<język html="en">
<głowa>
<źródło skryptu=
"//unpkg.com/alpinejs" odraczać></script>
@livewireStyles@livewirescripts
</head>
<ciało>
 ...
</body>
</html>

2. Funkcje JavaScript w klasach PHP

Livewire v3 będzie wspierać pisanie funkcji JavaScript bezpośrednio w komponentach Livewire zaplecza. Dodaj funkcję do swojego komponentu, dodaj komentarz /\*_ @js _/ nad funkcją, a następnie zwróć kod JavaScript, korzystając ze składni PHP HEREDOC, i wywołaj go ze swojego frontendu. Kod JavaScript zostanie wykonany bez wysyłania jakichkolwiek żądań do Twojego backendu.

<php
przestrzeń nazwAplikacja\Http\Przewód na żywo;
klasaTodosrozciąga się \Przewód na żywo\Część
{
/** @rekwizyt */
publiczny $todos;
/** @js */
publicznyfunkcjonowaćjasne()
 {
 powrót <<<'JS'
 to.do zrobienia = '';
 JS;
 }
}
?>
<dz>
<przewód wejściowy: model ="do zrobienia" />
<Drut przycisku: kliknij ="jasne">Jasne</button>
</div>

3. Zablokowane właściwości

Livewire v3 będzie obsługiwał zablokowane właściwości — właściwości, których nie można zaktualizować z interfejsu użytkownika. Dodaj /\*\* @locked / komentarz nad właściwością swojego komponentu, a Livewire zgłosi wyjątek, jeśli ktoś spróbuje zaktualizować tę właściwość z interfejsu użytkownika.

<php
przestrzeń nazwAplikacja\Http\Przewód na żywo;
klasaTodosrozciąga się \Przewód na żywo\Część
{
/** @zablokowany */
publiczny $todos = [];
}
?>

4. Drut: model jest domyślnie odroczony

Ponieważ Livewire i jego wykorzystanie ewoluowały, zdaliśmy sobie sprawę, że zachowanie „odroczone” ma większy sens w przypadku 95% formularzy, więc w wersji 3 „odroczona” funkcja będzie domyślna. Pozwoli to zaoszczędzić na niepotrzebnych żądaniach kierowanych do serwera i poprawić wydajność. Kiedy potrzebujesz funkcji „na żywo” na wejściu, możesz użyć wire: model.live, aby włączyć tę funkcjonalność.

Jest to jedna z niewielu przełomowych zmian z wersji 2 do wersji 3.

5. Żądania są grupowane

W Livewire v2, jeśli masz wiele komponentów korzystających z drutu: poll lub wysyłanie i nasłuchiwanie zdarzeń, każdy z tych składników będzie wysyłał osobne żądania do serwera w każdej ankiecie lub wydarzeniu. W Livewire v3 istnieje inteligentne grupowanie żądań, dzięki czemu można przesyłać: ankiety, zdarzenia, słuchacze i wywołania metod można w miarę możliwości grupować w jedno żądanie, oszczędzając jeszcze więcej żądań i poprawiając wydajność.

6. Właściwości reaktywne

W Livewire v3, kiedy ty przekazać fragment danych do komponentu potomnego , dodaj komentarz/\*_ @prop _/ nad właściwością w komponencie potomnym, a następnie zaktualizuj go w komponencie nadrzędnym, zostanie on zaktualizowany w komponencie potomnym.

<php
przestrzeń nazwAplikacja\Http\Przewód na żywo;
klasaTodosCountrozciąga się \Przewód na żywo\Część{
/** @rekwizyt */
publiczny $todos;
publicznyfunkcjonowaćrenderowanie(){
 powrót <<<'HTML'
<dz>
 Todo: {{count($todos) }}
</div>
 HTML;
 }
 }

7. Uzyskaj dostęp do danych i metod komponentu nadrzędnego za pomocą $parent

W Livewire v3 pojawi się nowy sposób uzyskiwania dostępu do danych i metod komponentu nadrzędnego. Istnieje nowa właściwość $parent, do której można uzyskać dostęp w celu wywołania metod na obiekcie nadrzędnym.

<php
przestrzeń nazwAplikacja\Http\Przewód na żywo;
klasaTodoInputrozciąga się \Przewód na żywo\Część{
/** @modelowalny */
publiczny $wartość = '';
publicznyfunkcjonowaćrenderowanie(){
 powrót <<<'HTML'
<dz>
<przewód wejściowy: model ="wartość" przewód: keydown.enter="$rodzic.add()">
</div>
 HTML;
 }
 }

8. teleport

Livewire v3 będzie również zawierać nową dyrektywę @teleport Blade, która pozwoli ci „teleportować” fragment znacznika i renderować go jako inną część DOM. Może to czasem pomóc uniknąć problemów z indeksem Z w modach i slajdach.

<dz>
<Drut przycisku: kliknij ="pokaż Modalne">Pokaż moda</button>
@teleport('#stopka&apos;)
<przewód x-modalny: model="pokaż Modalne">
<!--... -->
</x-modal>
@endteleport
</div>

9. Leniwe komponenty

W Livewire v3 wystarczy dodać leniwy atrybut podczas renderowania komponentu, a początkowo nie będzie on renderowany. Gdy pojawi się w rzutni, Livewire wyśle ​​żądanie renderowania. Będziesz także mógł dodawać treści zastępcze, implementując metodę zastępczą w swoim komponencie.

<dz>
<Drut przycisku: kliknij ="pokaż Modalne">Pokaż moda</button>
@teleport('#stopka&apos;)
<przewód x-modalny: model="pokaż Modalne">
<livewire: przykład-komponent leniwy />
</x-modal>
@endteleport
</div>
<php
przestrzeń nazwAplikacja\Http\Przewód na żywo;
KlasaPrzykładKomponentrozciąga się \Przewód na żywo\Część{
publicznystatycznyfunkcjonowaćsymbol zastępczy(){
powrót <<<'HTML'
<x-spinner />
>>>
}
publiczny funkcjonować renderowanie()/** [tl! zwiń: 7] */{
 powrót <<<'HTML'
<dz>
 Todo: {{count($todos) }}
</div>
 HTML;
 }
}
?>

Prostota i moc w Livewire V3

Połączenie prostoty i mocy jest tym, co sprawia, że Laravel Livewire tak niesamowite i dlaczego jest używany przez tak wielu programistów. Jest to szczególnie dobra alternatywa dla kombinacji Laravel + Inertia + Vue. W szczególności Laravel jest również powiązany z innymi frameworkami, które są potężne i do pracy.