Vad är nytt i Livewire v3 Laravel Framework?

Vad är nytt i Livewire v3 Laravel Framework?

Laravel Livewire är ett utmärkt verktyg för att uppnå dynamiskt beteende på en webbsida, utan att direkt skriva JavaScript-kod. Det gör det enkelt att bygga dynamiska gränssnitt, utan att lämna Laravels komfort. Nyligen har Livewire-kärnan skrivits om helt.





varför är min telefon så varm

Den nya Livewire v3 har bättre skillnader, funktioner kan byggas snabbare och det finns mindre duplicering mellan Livewire och Alpine eftersom den förlitar sig mer på Alpine och använder dess Morph, History och andra plugins. Flera av de nya funktionerna möjliggjordes också genom att omstrukturera kodbasen och lägga större tonvikt på Alpine.





MAKEUSE AV DAGENS VIDEO

1. Injicera Livewire-skript, stilar och Alpine automatiskt

Efter att kompositören har installerat Livewire v2 måste du manuellt lägga till @livewireStyles, @livewireScripts och Alpine till din layout. Med Livewire v3 behöver du bara installera Livewire och allt du behöver injiceras automatiskt - inklusive Alpine!





<!DOCTYPE html> 
<html lang="en">
<head>
<script src="//unpkg.com/alpinejs" defer></script>
@livewireStyles @livewireScripts
</head>
<body>
...
</body>
</html>

2. JavaScript-funktioner i PHP-klasser

Livewire v3 kommer att stödja att skriva JavaScript-funktioner direkt i dina backend Livewire-komponenter. Lägg till en funktion till din komponent, lägg till en /\*_ @js _/ kommentar ovanför funktionen, returnera sedan lite JavaScript-kod med PHP:s HEREDOC-syntax och anropa den från din frontend. JavaScript-koden kommer att köras utan att skicka några förfrågningar till din backend.

<?php 
namespace App\Http\Livewire;
class Todos extends \Livewire\Component
{
/** @prop */
public $todos;
/** @js */
public function clear()
{
return <<<'JS'
this.todo = '';
JS;
}
}
?>
<div>
<input wire:model="todo" />
<button wire:click="clear">Clear</button>
</div>

3. Låsta egenskaper

Livewire v3 kommer att stödja låsta egenskaper - egenskaper som inte kan uppdateras från frontend. Lägg till en /\*\* @locked / kommentar ovanför en egenskap på din komponent, så kommer Livewire att skapa ett undantag om någon försöker uppdatera den egenskapen från frontend.



<?php 
namespace App\Http\Livewire;
class Todos extends \Livewire\Component
{
/** @locked */
public $todos = [];
}
?>

4. Wire:modellen är uppskjuten som standard

Allt eftersom Livewire och dess användning har utvecklats har vi insett att det 'uppskjutna' beteendet är mer meningsfullt för 95 % av formulären, så i v3 kommer 'uppskjuten' funktionalitet att vara standard. Detta kommer att spara onödiga förfrågningar som går till din server och förbättra prestandan. När du behöver 'live'-funktionen på en ingång kan du använda wire:model.live för att aktivera den funktionen.