Laravel Livewire ist ein großartiges Tool, um dynamisches Verhalten auf einer Webseite zu erreichen, ohne direkt JavaScript-Code zu schreiben. Es macht das Erstellen dynamischer Schnittstellen einfach, ohne den Komfort von Laravel zu verlassen. Kürzlich wurde der Livewire-Kern komplett neu geschrieben.

Das neue Livewire v3 hat eine bessere Differenzierung, Funktionen können schneller erstellt werden und es gibt weniger Duplizierung zwischen Livewire und Alpine, weil es sich mehr auf Alpine verlässt und dessen Morph, History und andere verwendet Plugins. Einige der neuen Features wurden auch durch die Umstrukturierung der Codebasis und die stärkere Betonung von Alpine ermöglicht.

1. Fügen Sie Livewire-Skripte, -Stile und -Alpine automatisch ein

Nachdem der Composer Livewire v2 installiert hat, müssen Sie @livewireStyles, @livewireScripts und Alpine manuell zu Ihrem Layout hinzufügen. Mit Livewire v3 brauchen Sie nur Livewire zu installieren und alles, was Sie brauchen, wird automatisch injiziert – einschließlich Alpine!

instagram viewer 
<!DOCTYPE html>
<htmllang="en">
<Kopf>
<script src="//unpkg.com/alpinejs" verschieben></script>
@livewireStyles@livewireScripts
</head>
<Körper>
 ...
</body>
</html>

2. JavaScript-Funktionen in PHP-Klassen

Livewire v3 unterstützt das Schreiben von JavaScript-Funktionen direkt in Ihren Backend-Livewire-Komponenten. Fügen Sie Ihrer Komponente eine Funktion hinzu, fügen Sie über der Funktion einen /\*_ @js _/ -Kommentar hinzu, geben Sie dann JavaScript-Code mit der HEREDOC-Syntax von PHP zurück und rufen Sie ihn von Ihrem Frontend aus auf. Der JavaScript-Code wird ausgeführt, ohne dass Anfragen an Ihr Backend gesendet werden.

<?php
NamensraumApp\Http\Livewire;
KlasseTodserweitert \Livewire\Komponente
{
/** @Stütze */
öffentlich $todos;
/** @js */
öffentlichFunktionklar()
 {
 zurückkehren <<<'JS'
 this.todo = '';
 JS;
 }
}
?>
<div>
<Eingangskabel: Modell ="machen" />
<Knopfdraht: click="klar">Klar</button>
</div>

3. Gesperrte Eigenschaften

Livewire v3 unterstützt gesperrte Eigenschaften – Eigenschaften, die nicht über das Frontend aktualisiert werden können. Fügen Sie über einer Eigenschaft Ihrer Komponente einen /\*\* @locked / -Kommentar hinzu, und Livewire löst eine Ausnahme aus, wenn jemand versucht, diese Eigenschaft vom Frontend aus zu aktualisieren.

<?php
NamensraumApp\Http\Livewire;
KlasseTodserweitert \Livewire\Komponente
{
/** @gesperrt */
öffentlich $todos = [];
}
?>

4. Draht: Modell wird standardmäßig zurückgestellt

Da sich Livewire und seine Verwendung weiterentwickelt haben, haben wir erkannt, dass das „verzögerte“ Verhalten für 95 % der Formulare sinnvoller ist, sodass in v3 die „verzögerte“ Funktionalität die Standardfunktion sein wird. Dadurch werden unnötige Anfragen an Ihren Server eingespart und die Leistung verbessert. Wenn Sie die „Live“-Funktionalität für einen Eingang benötigen, können Sie wire: model.live verwenden, um diese Funktionalität zu aktivieren.

Dies ist eine der wenigen bahnbrechenden Änderungen von v2 zu v3.

5. Anfragen werden gestapelt

Wenn Sie in Livewire v2 mehrere Komponenten haben, die wire verwenden: poll or Versenden und Abhören von Ereignissen, sendet jede dieser Komponenten bei jeder Umfrage oder jedem Ereignis separate Anfragen an den Server. In Livewire v3 gibt es eine intelligente Bündelung von Anfragen, sodass Folgendes verdrahtet wird: Umfragen, Ereignisse, Listener und Methodenaufrufe können nach Möglichkeit in einer Anfrage zusammengefasst werden, wodurch noch mehr Anfragen eingespart und verbessert werden Leistung.

6. Reaktive Eigenschaften

Wenn Sie in Livewire v3 Übergeben Sie ein Datenelement an eine untergeordnete Komponente , fügen Sie einen/\*_ @prop _/ Kommentar über der Eigenschaft in der untergeordneten Komponente hinzu und aktualisieren Sie sie dann in der übergeordneten Komponente. Sie wird in der untergeordneten Komponente aktualisiert.

<?php
NamensraumApp\Http\Livewire;
KlasseTodosCounterweitert \Livewire\Komponente{
/** @Stütze */
öffentlich $todos;
öffentlichFunktionmachen(){
 zurückkehren <<<'HTML'
<div>
 Aufgaben: {{ count($todos) }}
</div>
 HTML;
 }
 }

7. Greifen Sie mit $parent auf die Daten und Methoden der übergeordneten Komponente zu

In Livewire v3 wird es eine neue Möglichkeit geben, auf die Daten und Methoden einer übergeordneten Komponente zuzugreifen. Es gibt eine neue $parent-Eigenschaft, auf die zugegriffen werden kann, um Methoden für das übergeordnete Element aufzurufen.

<?php
NamensraumApp\Http\Livewire;
KlasseTodoInputerweitert \Livewire\Komponente{
/** @modellierbar */
öffentlich $wert = '';
öffentlichFunktionmachen(){
 zurückkehren <<<'HTML'
<div>
<Eingangskabel: Modell ="Wert" Leitung: keydown.enter="$parent.add()">
</div>
 HTML;
 }
 }

8. Teleportieren

Livewire v3 enthält auch eine neue @teleport Blade-Direktive, die es Ihnen ermöglicht, ein Stück Markup zu „teleportieren“ und es als einen anderen Teil des DOM zu rendern. Dies kann manchmal helfen, Z-Index-Probleme mit Modals und Slideouts zu vermeiden.

<div>
<Knopfdraht: click="zeigenModal">Modal anzeigen</button>
@teleportieren('#Fusszeile&apos;)
<x-modaler Draht: model="zeigenModal">
<!--... -->
</x-modal>
@endteleport
</div>

9. Faule Komponenten

Fügen Sie in Livewire v3 beim Rendern einer Komponente einfach ein Lazy-Attribut hinzu, und es wird anfänglich nicht gerendert. Wenn es in das Ansichtsfenster kommt, löst Livewire eine Anfrage zum Rendern aus. Sie können auch Platzhalterinhalte hinzufügen, indem Sie die Platzhaltermethode in Ihrer Komponente implementieren.

<div>
<Knopfdraht: click="zeigenModal">Modal anzeigen</button>
@teleportieren('#Fusszeile&apos;)
<x-modaler Draht: model="zeigenModal">
<livewire: Beispiel-Komponente faul />
</x-modal>
@endteleport
</div>
<?php
NamensraumApp\Http\Livewire;
KlasseBeispielKomponenteerweitert \Livewire\Komponente{
öffentlichstatischFunktionPlatzhalter(){
zurückkehren <<<'HTML'
<X-Spinner />
>>>
}
öffentlich Funktion machen()/** [tl! einklappen: 7] */{
 zurückkehren <<<'HTML'
<div>
 Aufgaben: {{count($todos) }}
</div>
 HTML;
 }
}
?>

Einfachheit und Leistung in Livewire V3

Die Kombination aus Einfachheit und Kraft macht es aus Laravel Livewire so großartig und warum es von so vielen Entwicklern verwendet wird. Es ist vor allem eine gute Alternative zur Kombination Laravel + Inertia + Vue. Insbesondere Laravel ist auch mit anderen Frameworks gebündelt, die leistungsstark sind und mit denen man arbeiten kann.