Laravel Livewire on loistava työkalu dynaamisen toiminnan saavuttamiseen verkkosivulla kirjoittamatta suoraan JavaScript-koodia. Se tekee dynaamisten käyttöliittymien rakentamisesta yksinkertaista jättämättä Laravelin mukavuutta. Viime aikoina Livewire-ydin on kirjoitettu kokonaan uudelleen.

Uudessa Livewire v3:ssa on parempi erotus, ominaisuuksia voidaan rakentaa nopeammin ja päällekkäisyyksiä on vähemmän Livewiren ja Alpinen välillä, koska se luottaa enemmän Alpiseen ja käyttää sen morfia, historiaa ja muuta laajennuksia. Useat uudet ominaisuudet mahdollistivat myös koodikannan uudelleenjärjestelyn ja Alpinen korostamisen.

1. Lisää Livewire-skriptit, tyylit ja Alpine automaattisesti

Kun säveltäjä on asentanut Livewire v2:n, sinun on manuaalisesti lisättävä asetteluun @livewireStyles, @livewireScripts ja Alpine. Livewire v3:lla sinun tarvitsee vain asentaa Livewire ja kaikki tarvitsemasi ruiskutetaan automaattisesti - myös Alpine!

<!DOCTYPE html>
<html lang="fi">
<pää>
<komentosarja src="//unpkg.com/alpinejs" lykätä></script>
@livewireStyles@livewireScripts
</head>
<kehon>
 ...
</body>
</html>
instagram viewer

2. JavaScript-funktiot PHP-luokissa

Livewire v3 tukee JavaScript-toimintojen kirjoittamista suoraan Livewire-taustakomponentteihin. Lisää funktio komponenttiin, lisää /\*_ @js _/ -kommentti funktion yläpuolelle, palauta sitten JavaScript-koodi PHP: n HEREDOC-syntaksilla ja kutsu se käyttöliittymästäsi. JavaScript-koodi suoritetaan ilman pyyntöjen lähettämistä taustajärjestelmääsi.

<?php
nimiavaruusSovellus\HTTP\Livewire;
luokkaaTodosulottuu \Livewire\Komponentti
{
/** @prop */
julkinen $todos;
/** @js */
julkinentoimintoasia selvä()
 {
 palata <<<'JS'
 this.todo = '';
 JS;
 }
}
?>
<div>
<tulojohto: malli="tehdä" />
<napin johto: click="asia selvä">Asia selvä</button>
</div>

3. Lukitut ominaisuudet

Livewire v3 tukee lukittuja ominaisuuksia – ominaisuuksia, joita ei voi päivittää käyttöliittymästä. Lisää /\*\* @locked / -kommentti komponenttisi ominaisuuden yläpuolelle, niin Livewire tekee poikkeuksen, jos joku yrittää päivittää ominaisuuden käyttöliittymästä.

<?php
nimiavaruusSovellus\HTTP\Livewire;
luokkaaTodosulottuu \Livewire\Komponentti
{
/** @lukittu */
julkinen $todos = [];
}
?>

4. Johto: malli on oletuksena viivästynyt

Livewiren ja sen käytön kehittyessä olemme ymmärtäneet, että "lykätty" toiminta on järkevämpää 95 %:ssa lomakkeista, joten v3:ssa "lykätty" toiminto on oletusarvo. Tämä säästää tarpeettomista pyynnöistä palvelimellesi ja parantaa suorituskykyä. Kun tarvitset "live"-toiminnon tuloon, voit ottaa tämän toiminnon käyttöön kaapelilla: model.live.

Tämä on yksi harvoista murtuvista muutoksista v2:sta v3:een.

5. Pyynnöt kootaan

Livewire v2:ssa, jos sinulla on useita lankakomponentteja: kysely tai tapahtumien lähettäminen ja kuunteleminen, jokainen näistä komponenteista lähettää erilliset pyynnöt palvelimelle jokaisessa kyselyssä tai tapahtumassa. Livewire v3:ssa on älykäs pyyntöjen ryhmittely, jotta kyselyt, tapahtumat, kuuntelijat ja menetelmäkutsut voidaan koota yhteen pyyntöön, kun mahdollista, mikä säästää entistä enemmän pyyntöjä ja parantaa esitys.

6. Reaktiiviset ominaisuudet

Livewire v3:ssa, kun välittää datan alikomponentille , lisää/\*_ @prop _/ kommentti alatason ominaisuuden yläpuolelle ja päivitä se sitten yläkomponenttiin, se päivitetään alikomponenttiin.

<?php
nimiavaruusSovellus\HTTP\Livewire;
luokkaaTodosCountulottuu \Livewire\Komponentti{
/** @prop */
julkinen $todos;
julkinentoimintorenderöi(){
 palata <<<'HTML'
<div>
 Tehtävät: {{ count($todos) }}
</div>
 HTML;
 }
 }

7. Pääset pääkomponentin tietoihin ja menetelmiin käyttämällä $parent

Livewire v3:ssa on uusi tapa päästä käsiksi pääkomponentin tietoihin ja menetelmiin. Siellä on uusi $parent-ominaisuus, jota voidaan käyttää ylätason menetelmien kutsumiseen.

<?php
nimiavaruusSovellus\HTTP\Livewire;
luokkaaTodoInputulottuu \Livewire\Komponentti{
/** @mallinnettavissa */
julkinen $arvo = '';
julkinentoimintorenderöi(){
 palata <<<'HTML'
<div>
<tulojohto: malli="arvo" lanka: keydown.enter="$parent.add()">
</div>
 HTML;
 }
 }

8. Teleportoi

Livewire v3 sisältää myös uuden @teleport Blade -direktiivin, jonka avulla voit "teleportoida" osan merkinnöistä ja tehdä siitä toisen osan DOM: ta. Tämä voi joskus auttaa välttämään z-indeksiongelmia modaaleissa ja liukuesteissä.

<div>
<napin johto: click="showModal">Näytä modaali</button>
@teleportti('#alatunniste&apos;)
<x-modaalinen johto: malli="showModal">
<!--... -->
</x-modal>
@endteleport
</div>

9. Laiskoja komponentteja

Livewire v3:ssa lisää vain laiska attribuutti komponenttia hahmonnettaessa, niin sitä ei hahmonneta aluksi. Kun se tulee katseluporttiin, Livewire käynnistää pyynnön sen renderöimiseksi. Voit myös lisätä paikkamerkkisisältöä ottamalla paikkamerkkimenetelmän käyttöön komponentissasi.

<div>
<napin johto: click="showModal">Näytä modaali</button>
@teleportti('#alatunniste&apos;)
<x-modaalinen johto: malli="showModal">
<livewire: esimerkki-komponentti laiska />
</x-modal>
@endteleport
</div>
<?php
nimiavaruusSovellus\HTTP\Livewire;
LuokkaEsimerkkikomponenttiulottuu \Livewire\Komponentti{
julkinenstaattinentoimintopaikanpitäjä(){
palata <<<'HTML'
<x-spinner />
>>>
}
julkinen toiminto renderöi()/** [tl! romahtaa: 7] */{
 palata <<<'HTML'
<div>
 Tehtävät: {{count($todos) }}
</div>
 HTML;
 }
}
?>

Yksinkertaisuus ja teho Livewire V3:ssa

Yksinkertaisuuden ja voiman yhdistelmä tekee Laravel Livewire niin mahtava ja miksi niin monet kehittäjät käyttävät sitä. Se on erityisen hyvä vaihtoehto Laravel + Inertia + Vue -yhdistelmälle. Erityisesti Laravel on myös niputettu muihin kehyksiin, jotka ovat tehokkaita ja joiden kanssa voidaan työskennellä.