Na żywo na scenie w Laracon, Caleb Porzio właśnie wydał oficjalną wersję beta Livewire v3! W swoim wystąpieniu zaprezentował mnóstwo nowych funkcji, z których niektóre omówimy tutaj.
Przepisany rdzeń Rdzeń
Livewire został całkowicie przepisany od zera. Przepisanie rdzenia było ogromnym przedsięwzięciem, ale konieczne było osiągnięcie wszystkiego, co jest zawarte w tym wydaniu. Nowa architektura rdzenia będzie również znacznie łatwiejsza w utrzymaniu dla Caleba i głównych współpracowników Livewire.
Wykorzystanie
Alpine Rdzeń v3 wykorzystuje teraz w pełni potencjał Alpine. Zamiast dołączać kod do stosowania aktualizacji DOM, dodawania detektorów zdarzeń itp., Zarówno w Livewire, jak i Alpine, Livewire v3 wykorzystuje Alpine do podnoszenia ciężarów. Rejestrując wtyczki Alpine, Livewire pozwala teraz Alpine wykonywać ciężkie podnoszenie, jednocześnie zapewniając cukier składniowy, który pokochałeś.
Oznacza to również, że Alpine jest teraz domyślnie dołączony do Livewire, więc nie ma potrzeby ładowania Alpine za pośrednictwem CDN lub NPM. Jest automatycznie wstrzykiwany.
Ponadto v3 wykorzystuje wtyczkę Alpine Morph do różnicowania DOM i stosowania aktualizacji zamiast morphdom. Doprowadzi to do zmniejszenia liczby problemów różnicujących DOM i ogólnej lepszej kompatybilności między Livewire i Alpine.
Ulepszone zagnieżdżanie komponentów W przeszłości uważałem zagnieżdżanie
komponentów Livewire za antywzorzec lub coś, czego należy unikać, gdy jest to możliwe ze względu na potencjalne implikacje dla wydajności. W v3 tak nie będzie!
Dzięki reaktywnym rekwizytom, połączonym żądaniom, nowej $parent właściwości i innym ulepszeniom, wersja 3 znacznie poprawia zagnieżdżanie komponentów. Niektóre z tych ulepszeń omówimy bardziej szczegółowo w dalszej części tego posta.
Ulepszona serializacja
właściwości v2 próbowała inteligentnie określić, jakie właściwości typu znajdowały się na początkowym renderowaniu, aby ponownie je uwodnić jako te same typy w kolejnych żądaniach. Wersja 2 nie obsługiwała jednak głęboko zagnieżdżonego nawodnienia. Jeśli masz kolekcję z mieszanymi typami, wersja 2 nie rzutowałaby każdego elementu kolekcji z powrotem do oryginalnego typu. V3 jest znacznie mądrzejszy i przechowuje typ każdego elementu, aby mógł rzucić je z powrotem do odpowiednich typów przy kolejnych żądaniach.
Powiązane żądania W wersji v2, gdy wiele komponentów na stronie sondowało lub nasłuchiwało tego samego zdarzenia, Livewire wysyłał osobne żądania
dla każdego komponentu za każdym razem, gdy musiał komunikować się z serwerem. Wersja 3 jest znacznie bardziej wydajna i łączy wszystkie te aktualizacje w jedno żądanie.
Lepsze ustawienia domyślne
Rozróżnianie
DOM przez wstrzykiwanie znacznika ostrza jest jednym z najczęstszych problemów, jakie można napotkać w wersji v2. Problem był zwykle spowodowany przez @if podobne dyrektywy Blade wstawiające lub usuwające elementy DOM. v3 próbuje obejść te problemy, wprowadzając komentarze HTML (znaczniki) tam, gdzie te dyrektywy Blade zaczynają się i kończą. Szukając tych znaczników, Livewire może dopasować nowe lub usunięte elementy DOM do znacznika, aby umieścić je poprawnie w DOM.
<form wire:submit="save">
{{-- ... --}}
<!-- __BLOCK__ -->
@if ($success)
<div>Saved!</div>
@endif
<!-- ENDBLOCK -->
<div>
<button>Save</button>
</div>
<div>
wire:model jest domyślnie
odroczony Pierwotnie Livewire "na żywo" był naprawdę fajną funkcją, więc został ustawiony jako domyślny. Po głębszym zastanowieniu i obserwacji rzeczywistego użycia, Caleb zdał sobie sprawę, że odroczenie wire:model żądań było lepszym domyślnym rozwiązaniem. Większość aplikacji w rzeczywistości nie wymaga synchronizacji wartości wejściowych z serwerem przy każdym naciśnięciu, więc wersja 3 zmienia domyślne zachowanie. Poprzednia wire:model.defer funkcjonalność jest nową domyślną podczas korzystania z wire:model. wire:model.live została dodana, aby zastąpić stare domyślne zachowanie na wejściach, które faktycznie muszą być "na żywo".
{{-- Now deferred by default --}}
<input wire:model="name">
{{-- Syncs with the server on every keystroke --}}
<input wire:model.live="name">
Nowe funkcje
Automatycznie wstrzykiwane zasoby
W wersji v3 Livewire automatycznie wstrzykuje swoje style, skrypty i Alpine. Nie musisz już dodawać <livewire:styles /> ani <livewire:scripts /> ładować Alpine w swoich projektach!
Nowa domyślna przestrzeń
nazw Domyślnie wersja 3 używa App\Livewire przestrzeni nazw (i app/Livewire katalogu) zamiast App\Http\Livewire teraz. Istnieje opcja konfiguracji, aby zachować starą przestrzeń nazw, jeśli wolisz.
Właściwości
reaktywne Pochodzący z frameworków frontendowych, takich jak React i Vue, niektórzy użytkownicy Livewire automatycznie zakładali, że właściwości, które przekazali do zagnieżdżonych komponentów, będą reagować na zmiany w składniku nadrzędnym. Ze względu na pewne ograniczenia w wersji v2 nie było to możliwe. Musieliśmy polegać na zdarzeniach lub innych obejściach, aby zsynchronizować zagnieżdżone składniki. Wersja 3 dodaje obsługę "reaktywnych" rekwizytów. Jest to tak proste, jak dodanie atrybutu PHP do właściwości w klasie komponentu#[Reactive].
<?php
// ...
use Livewire\Attributes\Reactive;
class InvoiceItem extends Component
{
#[Reactive]
public $item;
}Obiekty formularza Obiekty formularza
Obiekty formularza Obiekty formularza are a new concept that can help keep component classes clean by abstracting away some of the form-specific code. You may want to put a component's form properties, validation, saving functionality, and more on form objects.
Oto mały przykład, ale polecam przeczytanie dokumentacji, aby uzyskać pełną listę funkcji!
<?php
namespace App\Livewire\Forms;
use Livewire\Form;
class UserForm extends Form
{
#[Rule('required')]
public $name = '';
#[Rule(['required', 'email'])]
public $email = '';
}<?php
namespace App\Livewire;
use Livewire\Component;
use App\Models\Post;
use App\Livewire\Forms\UserForm;
class UpdateProfile extends Component
{
public UserForm $form;
public function save()
{
auth()->user()->update(
$this->form->all()
);
return $this->redirect('/profile');
}
public function render()
{
return view('livewire.update-profile');
}
}<form wire:submit="save">
<input type="text" wire:model="form.name">
<div>
@error('form.name')
<span class="error">{{ $message }}</span>
@enderror
</div>
<input type="email" wire:model="form.email">
<div>
@error('form.email')
<span class="error">{{ $message }}</span>
@enderror
</div>
<button type="submit">Save</button>
</form>
wire:navigate (tryb SPA)
Kolejnym nowym dodatkiem jest wire:navigate. Podczas korzystania z całostronicowych komponentów Livewire możesz teraz dodać atrybut wire:navigate do swoich linków, aby umożliwić korzystanie z SPA. Zamiast ładować całą stronę, Livewire doda wskaźnik ładowania na górze strony, pobierze zawartość nowej strony w tle, a następnie inteligentnie zamieni kod HTML na stronie. Ta funkcja obsługuje również pobieranie z wyprzedzeniem i przekierowania oraz umożliwia utrwalanie elementów.
<a href="/profile" wire:navigate>Profile</a>
@persist
Po dodaniu , wire:navigatemożesz teraz mieć "trwałe" elementy, które nie są ponownie wczytywane podczas poruszania się po różnych stronach. Ta funkcja będzie przydatna w przypadkach użycia, takich jak odtwarzacze audio, które mają kontynuować odtwarzanie dźwięku, podczas gdy użytkownicy klikają różne strony.
Aby użyć tej funkcji, zawiń element, który ma zostać utrwalony, w dyrektywie@persist:
@persist('player')
<audio src="{{ $episode->file }}" controls></audio>
@endpersistLazy-loaded components
Livewire obsługuje teraz leniwe komponenty. Czasami masz komponent, który może spowolnić początkowe ładowanie strony lub jest początkowo ukryty w modalu, który chcesz leniwie załadować, aby utrzymać szybkie ładowanie początkowej strony.
Aby leniwie ładować składnik, dodaj atrybut do składnika lazy w bloku.
<livewire:your-component lazy />
Livewire pominie renderowanie tego komponentu podczas początkowego ładowania strony. Po załadowaniu całej pozostałej zawartości zostanie wysłane żądanie sieciowe w celu pełnego wyrenderowania komponentu, a komponent zostanie wstawiony do modelu DOM.
$parent Aby
komunikować się z komponentami "nadrzędnymi" w poprzednich wersjach Livewire, trzeba było używać zdarzeń i detektorów. W wersji v3 dostępna jest nowa $parent właściwość, której można użyć do wywoływania metod w komponentach nadrzędnych bezpośrednio z elementów podrzędnych.
<div>
<span>{{ $item->name }}</span>
<button wire:click="$parent.remove({{ $item->id }})">Remove</button>
</div>
Metody hybrydowe/oceniające JS z backendu
v3 pozwalają teraz pisać metody JavaScript w komponentach zaplecza. Dodając #[Js] atrybut do metody w komponencie, możesz napisać kod JavaScript jako ciąg znaków, a Livewire ujawni tę metodę Twojemu frontenowi. Po wywołaniu przez wire:click, JavaScript zostanie wykonany na interfejsie użytkownika bez żadnych żądań sieciowych wysyłanych z powrotem do serwera.
<?php
// ...
use Livewire\Attributes\Js;
class UsersTable extends Component
{
public $filters = [];
#[Js]
public function reset()
{
return <<<'JS'
$wire.filters = [];
JS;
}
// ...
}<div>
<div>
<input wire:model.live="filters.active" type="checkbox">
<label>Only active</label>
</div>
<button wire:click="reset">Reset Filters</button>
@foreach ($users as $user)
{{-- ... --}}
@endforeach
</div>
Czasami przydatne jest wykonywanie małych bitów JavaScript z metod zaplecza. Wersja V3 umożliwia to za pomocą $this->js() metody. Wystarczy wywołać metodę i przekazać ciąg JavaScript, a Livewire wykona go na frontendzie podczas następnego renderowania.
public function save()
{
// ...
$this->js("alert('You just executed JS from the backend!')");
}Użycie
atrybutu PHP Atrybuty PHP są stosunkowo nową i zaawansowaną funkcją PHP, a Livewire v3 wykorzystuje je intensywnie dla nowych i istniejących funkcji.
#[Url]
Nowy #[Url] atrybut zastępuje $query właściwość z wersji v2. Dodaj #[Url] powyżej dowolną właściwość komponentu, a będzie ona śledzona w ciągu zapytania.
<?php
// ...
use Livewire\Attributes\Url;
class UsersTable extends Component
{
#[Url]
public $filters = [];
// ...
}#[On]
Nowy #[On] atrybut zastępuje $listeners właściwość z wersji v2. Dodaj #[On('some-event')] powyżej metodę w komponencie, a zostanie ona wykonana za każdym razem, gdy to zdarzenie zostanie wywołane. oraz #[Title]
<?php
// ...
use Livewire\Attributes\Url;
class UsersTable extends Component
{
// ...
#[On('filters-reset')]
public function resetFilters()
{
// ...
}
}Atrybuty new #[Layout] i umożliwiają ustawienie widoku układu i #[Title] tytułu dla komponentów całostronicowych.
#[Layout] Mogą być dodawane w odniesieniu do metody komponentu lub do render samej klasy.
#[Layout('layouts.app')]
public function render()
{
return view('livewire.create-post');
}#[Computed]
Zastępując składnię v2 getSomeProperty dla obliczonych właściwości, mamy atrybut.#[Computed] Działa tak samo jak stara składnia, ale ma kilka nowych, naprawdę potężnych dodatków.
W wersji 2 obliczane właściwości mogą być buforowane tylko podczas jednego żądania. W wersji v3 można buforować właściwość w wielu żądaniach, a nawet między składnikami. To sprawi, że buforowanie drogich zapytań do bazy danych będzie dziecinnie proste!
use Livewire\Attributes\Computed;
// Cache across requests
#[Computed(persist: true)]
public function user()
{
return User::findOrFail($this->userId);
}
// Cache across all instances of this component
#[Computed(cache: true)]
public function user()
{
return User::findOrFail($this->userId);
}#[Rule]
Nowy #[Rule] atrybut zastępuje $rules właściwość i rules metodę z wersji v2. Dodaj #[Rule(['required', 'max:150'])] do właściwości komponentu, aby poinformować Livewire, w jaki sposób właściwość powinna zostać zweryfikowana.
<?php
// ...
use Livewire\Attributes\Rule;
class InvoiceItem extends Component
{
#[Rule(['required', 'max:120'])]
public $itemName;
// ...
}#[Locked]
Nowy #[Locked] atrybut pozwala uniemożliwić użytkownikowi aktualizowanie właściwości z frontonu. Możesz użyć tego jako środka bezpieczeństwa w usługach, których użytkownicy nie powinni mieć możliwości zmiany.
<?php
// ...
use Livewire\Attributes\Locked;
class InvoiceItem extends Component
{
#[Locked]
public $id;
// ...
}Uaktualnianie
Proces aktualizacji większości aplikacji będzie dość szybki. livewire:upgrade Istnieje polecenie rzemieślnicze, które jest zawarte w wersji beta, aby pomóc w niektórych bardziej żmudnych zmianach, a następnie możesz postępować zgodnie z przewodnikiem aktualizacji , aby upewnić się, że wszystko jest aktualne.
Jeśli wolisz pozostawić aktualizację ekspertom Livewire, Caleb i ja oferujemy usługę, która pozwoli Ci szybko rozpocząć proces aktualizacji. Możesz to sprawdzić tutaj.
Nowy projekt strony internetowej i domena
Oprócz wszystkich nowych funkcji i ulepszeń, strona dokumentów Livewire została całkowicie przeprojektowana, przebudowana i przepisana!
Nowe dokumenty są znacznie dokładniejsze niż dokumenty v2. Szczegółowo omawiają każdą funkcję i szczegółowo opisują, w jaki sposób Livewire radzi sobie z hydratacją, morfingiem i zagnieżdżaniem komponentów pod maską. Gorąco polecam przeczytanie całej strony, gdy masz czas. To mistrzowska klasa w tworzeniu aplikacji Livewire v3!
Kolejnym dużym ogłoszeniem jest to, że strona z dokumentami zostanie przeniesiona do livewire.laravel.com. Idź tam i sprawdź to!
To był długi post, ale było tak wiele nowych funkcji do omówienia! Mam nadzieję, że wkrótce wypróbujesz v3 i nie krępuj się skontaktować z opiniami na temat ulepszeń.
