Laravel Livewire je skvělý nástroj pro dosažení dynamického chování na webové stránce bez přímého psaní kódu JavaScript. Díky tomu je vytváření dynamických rozhraní jednoduché, aniž byste opustili pohodlí Laravelu. Nedávno bylo jádro Livewire kompletně přepsáno.
Nový Livewire v3 má lepší diffing, funkce lze vytvářet rychleji a je zde méně duplikací mezi Livewire a Alpine, protože se více spoléhá na Alpine a využívá jeho Morph, History a další pluginy. Několik nových funkcí bylo také umožněno restrukturalizací kódové základny a kladením většího důrazu na Alpine.
1. Automaticky vkládat skripty Livewire, styly a Alpine
Poté, co skladatel nainstaloval Livewire v2, musíte do svého rozložení ručně přidat @livewireStyles, @livewireScripts a Alpine. S Livewire v3 stačí nainstalovat Livewire a vše, co potřebujete, se automaticky vstříkne – včetně Alpine!
<!DOCTYPE html>
<html jazyk="en">
<hlava>
<skript src="//unpkg.com/alpinejs" odložit></script>
@livewireStyles@livewireScripts
</head>
<tělo>
...
</body>
</html>2. Funkce JavaScriptu ve třídách PHP
Livewire v3 bude podporovat zápis funkcí JavaScriptu přímo do vašich backendových komponent Livewire. Přidejte do své komponenty funkci, přidejte komentář /\*_ @js _/ nad funkci, poté vraťte nějaký kód JavaScript pomocí syntaxe PHP HEREDOC a zavolejte jej ze svého frontendu. Kód JavaScript bude spuštěn bez odesílání jakýchkoli požadavků na váš backend.
<?php
jmenný prostorAplikace\HTTP\Livewire;
třídaTodosrozšiřuje \Livewire\Komponent
{
/** @podpěra */
veřejnost $todos;
/** @js */
veřejnostfunkcePrůhledná()
{
vrátit se <<<'JS'
toto.todo = '';
JS;
}
}
?>
<div>
<vstupní vodič: model="dělat" />
<tlačítkový drát: klik="Průhledná">Průhledná</button>
</div>3. Uzamčené vlastnosti
Livewire v3 bude podporovat uzamčené vlastnosti – vlastnosti, které nelze aktualizovat z frontendu. Přidejte komentář /\*\* @locked / nad vlastnost vaší komponenty a Livewire vyvolá výjimku, pokud se někdo pokusí aktualizovat tuto vlastnost z frontendu.
<?php
jmenný prostorAplikace\HTTP\Livewire;
třídaTodosrozšiřuje \Livewire\Komponent
{
/** @uzamčeno */
veřejnost $todos = [];
}
?>4. Drát: model je ve výchozím nastavení odložen
Jak se Livewire a jeho použití vyvíjely, uvědomili jsme si, že „odložené“ chování dává větší smysl pro 95 % formulářů, takže ve v3 bude „odložená“ funkce výchozí. Tím ušetříte zbytečné požadavky na váš server a zlepšíte výkon. Pokud potřebujete na vstupu funkci „živé“, můžete tuto funkci aktivovat pomocí wire: model.live.
Toto je jedna z mála přelomových změn z v2 na v3.
5. Požadavky jsou dávkové
V Livewire v2, pokud máte více komponent pomocí drátu: poll nebo dispečink a naslouchání událostem, každá z těchto komponent odešle na server samostatné požadavky na každý dotaz nebo událost. V Livewire v3 existuje inteligentní dávkování požadavků tak, aby bylo možné propojit: ankety, události, posluchače a volání metod lze, pokud je to možné, dávkovat do jednoho požadavku, čímž se ušetří ještě více požadavků a zlepší se výkon.
6. Reaktivní vlastnosti
V Livewire v3, když jste předat část dat podřízené součásti , přidejte komentář /\*_ @prop _/ nad vlastnost v podřízené komponentě, poté ji aktualizujte v nadřazené komponentě, bude aktualizována v podřízené komponentě.
<?php
jmenný prostorAplikace\HTTP\Livewire;
třídaTodosCountrozšiřuje \Livewire\Komponent{
/** @podpěra */
veřejnost $todos;
veřejnostfunkceposkytnout(){
vrátit se <<<'HTML'
<div>
Úkoly: {{ count($todos) }}
</div>
HTML;
}
}7. Přístup k datům a metodám nadřazené komponenty pomocí $parent
V Livewire v3 bude nový způsob přístupu k datům a metodám nadřazené komponenty. Existuje nová vlastnost $parent, ke které lze přistupovat k volání metod na nadřazeném objektu.
<?php
jmenný prostorAplikace\HTTP\Livewire;
třídaTodoInputrozšiřuje \Livewire\Komponent{
/** @modelovatelný */
veřejnost $hodnota = '';
veřejnostfunkceposkytnout(){
vrátit se <<<'HTML'
<div>
<vstupní vodič: model="hodnota" drát: keydown.enter="$parent.add()">
</div>
HTML;
}
}8. Teleportovat se
Livewire v3 bude také obsahovat novou direktivu @teleport Blade, která vám umožní „teleportovat“ část značky a vykreslit ji jako další součást DOM. To může někdy pomoci vyhnout se problémům s indexem z s modály a vysouvacími prvky.
<div>
<tlačítkový drát: klik="showModal">Zobrazit modální</button>
@teleport('#zápatí')
<x-modální drát: model="showModal">
<!--... -->
</x-modal>
@endteleport
</div>9. Líné komponenty
Ve verzi Livewire v3 stačí při vykreslování komponenty přidat atribut lazy a zpočátku se nevykreslí. Když přijde do výřezu, Livewire spustí požadavek na vykreslení. Budete také moci přidat zástupný obsah implementací metody zástupného symbolu do vaší komponenty.
<div>
<tlačítkový drát: klik="showModal">Zobrazit modální</button>
@teleport('#zápatí')
<x-modální drát: model="showModal">
<livewire: příklad-komponenta líný />
</x-modal>
@endteleport
</div>
<?php
jmenný prostorAplikace\HTTP\Livewire;
TřídaPříklad Komponentarozšiřuje \Livewire\Komponent{
veřejnoststatickýfunkcezástupný symbol(){
vrátit se <<<'HTML'
<x-spinner />
>>>
}
veřejnost funkce poskytnout()/** [tl! sbalit: 7] */{
vrátit se <<<'HTML'
<div>
Úkoly: {{count($todos) }}
</div>
HTML;
}
}
?>Jednoduchost a výkon v Livewire V3
Kombinace jednoduchosti a síly je to, co dělá Laravel Livewire tak úžasné a proč ho používá tolik vývojářů. Je to zvláště dobrá alternativa ke kombinaci Laravel + Inertia + Vue. Zejména Laravel je také spojen s dalšími frameworky, které jsou výkonné a lze s nimi pracovat.