Laravel Livewire este un instrument excelent pentru a obține un comportament dinamic pe o pagină web, fără a scrie direct cod JavaScript. Face construirea interfețelor dinamice simplă, fără a părăsi confortul Laravel. Recent, nucleul Livewire a fost complet rescris.
Noul Livewire v3 are o diferență mai bună, funcțiile pot fi construite mai rapid și există mai puține duplicari între Livewire și Alpine, deoarece se bazează mai mult pe Alpine și își folosește Morph, History și altele pluginuri. Câteva dintre noile funcții au fost posibile și prin restructurarea bazei de cod și punând un accent mai mare pe Alpine.
1. Injectați automat scripturi, stiluri și Alpine Livewire
După ce compozitorul instalează Livewire v2, trebuie să adăugați manual @livewireStyles, @livewireScripts și Alpine la aspectul dvs. Cu Livewire v3, trebuie doar să instalați Livewire și tot ceea ce aveți nevoie este injectat automat - inclusiv Alpine!
<!DOCTYPE html>
<html lang="ro">
<cap>
<script src="//unpkg.com/alpinejs" amâna></script>
@livewireStyles@livewireScripts
</head>
<corp>
...
</body>
</html>2. Funcții JavaScript în clasele PHP
Livewire v3 va accepta scrierea funcțiilor JavaScript direct în componentele Livewire de backend. Adăugați o funcție la componenta dvs., adăugați un /\*_ @js _/ comentariu deasupra funcției, apoi returnați un cod JavaScript folosind sintaxa PHP HEREDOC și apelați-l de pe front-end. Codul JavaScript va fi executat fără a trimite nicio solicitare către backend.
<?php
spatiu de numeApp\Http\Cablu sub tensiune;
clasăTodosse extinde \Cablu sub tensiune\Componentă
{
/** @recuzită */
public $todos;
/** @js */
publicfuncţieclar()
{
întoarcere <<<'JS'
this.todo = '';
JS;
}
}
?>
<div>
<fir de intrare: model="a face" />
<fir buton: click="clar">clar</button>
</div>3. Proprietăți blocate
Livewire v3 va suporta proprietăți blocate - proprietăți care nu pot fi actualizate din frontend. Adăugați un /\*\* @locked / comentariu deasupra unei proprietăți de pe componenta dvs. și Livewire va lansa o excepție dacă cineva încearcă să actualizeze acea proprietate de pe front-end.
<?php
spatiu de numeApp\Http\Cablu sub tensiune;
clasăTodosse extinde \Cablu sub tensiune\Componentă
{
/** @blocat */
public $todos = [];
}
?>4. Sârmă: modelul este amânat implicit
Pe măsură ce Livewire și utilizarea sa au evoluat, ne-am dat seama că comportamentul „amânat” are mai mult sens pentru 95% dintre formulare, așa că în v3 funcționalitatea „amânată” va fi implicită. Acest lucru va economisi pe solicitările inutile care ajung la serverul dvs. și va îmbunătăți performanța. Când aveți nevoie de funcționalitatea „live” pe o intrare, puteți utiliza wire: model.live pentru a activa această funcționalitate.
Aceasta este una dintre puținele modificări de la v2 la v3.
5. Cererile sunt grupate
În Livewire v2, dacă aveți mai multe componente folosind fir: sondaj sau trimiterea și ascultarea evenimentelor, fiecare dintre aceste componente va trimite cereri separate către server pentru fiecare sondaj sau eveniment. În Livewire v3, există o grupare inteligentă de solicitări, astfel încât să transmită: sondaje, evenimente, ascultători și apelurile de metodă pot fi grupate într-o singură solicitare atunci când este posibil, salvând și mai multe solicitări și îmbunătățind performanţă.
6. Proprietăți reactive
În Livewire v3, când tu transmiteți o bucată de date unei componente secundare , adăugați un/\*_ @prop _/ comentariu deasupra proprietății din copil, apoi actualizați-l în componenta părinte, va fi actualizat în componenta copil.
<?php
spatiu de numeApp\Http\Cablu sub tensiune;
clasăTodosCountse extinde \Cablu sub tensiune\Componentă{
/** @recuzită */
public $todos;
publicfuncţieface(){
întoarcere <<<'HTML'
<div>
Toate: {{ count($todos) }}
</div>
HTML;
}
}7. Accesați datele și metodele componentei părinte folosind $parent
În Livewire v3, va exista o nouă modalitate de a accesa datele și metodele unei componente părinte. Există o nouă proprietate $parent care poate fi accesată pentru a apela metode de pe părinte.
<?php
spatiu de numeApp\Http\Cablu sub tensiune;
clasăTodoInputse extinde \Cablu sub tensiune\Componentă{
/** @modelabil */
public $valoare = '';
publicfuncţieface(){
întoarcere <<<'HTML'
<div>
<fir de intrare: model="valoare" fir: keydown.enter="$parent.add()">
</div>
HTML;
}
}8. Teleportați
Livewire v3 va include, de asemenea, o nouă directivă @teleport Blade care vă va permite să „teleportați” o bucată de markup și să o redați o altă parte a DOM. Acest lucru poate ajuta uneori la evitarea problemelor cu indexul z cu modal și slide-outs.
<div>
<fir buton: click="showModal">Arată modal</button>
@teleport('#subsol')
<fir x-modal: model="showModal">
<!--... -->
</x-modal>
@endteleport
</div>9. Componente leneșe
În Livewire v3, adăugați doar un atribut leneș atunci când redați o componentă și nu va fi redat inițial. Când apare în fereastra de vizualizare, Livewire va lansa o solicitare de redare. De asemenea, veți putea adăuga conținut substituent prin implementarea metodei substituenților pe componenta dvs.
<div>
<fir buton: click="showModal">Arată modal</button>
@teleport('#subsol')
<fir x-modal: model="showModal">
<livewire: exemplu-component leneș />
</x-modal>
@endteleport
</div>
<?php
spatiu de numeApp\Http\Cablu sub tensiune;
ClasăExempluComponentse extinde \Cablu sub tensiune\Componentă{
publicstaticfuncţiesubstituent(){
întoarcere <<<'HTML'
<x-spinner />
>>>
}
public funcţie face()/** [tl! colaps: 7] */{
întoarcere <<<'HTML'
<div>
Toate: {{count($todos) }}
</div>
HTML;
}
}
?>Simplitate și putere în Livewire V3
Combinația dintre simplitate și putere este ceea ce face Laravel Livewire atât de minunat și de ce este folosit de atât de mulți dezvoltatori. Este în special o alternativă bună la combinația Laravel + Inertia + Vue. În special, Laravel este, de asemenea, împreună cu alte cadre care sunt puternice și cu care să lucreze.
