Home-theater-designers
O Laravel Livewire é uma ótima ferramenta para obter comportamento dinâmico em uma página da web, sem escrever diretamente o código JavaScript. Torna a construção de interfaces dinâmicas simples, sem sair do conforto do Laravel. Recentemente, o núcleo Livewire foi completamente reescrito.
O novo Livewire v3 tem melhor diferenciação, recursos podem ser construídos mais rapidamente e há menos duplicação entre Livewire e Alpine porque ele depende mais do Alpine e usa seu Morph, History e outros plugins. Vários dos novos recursos também foram viabilizados pela reestruturação da base de código e pela maior ênfase no Alpine.
MAKEUSEO VÍDEO DO DIA
1. Injete Scripts, Estilos e Alpine Livewire Automaticamente
Após o compositor instalar o Livewire v2, você deve adicionar manualmente @livewireStyles, @livewireScripts e Alpine ao seu layout. Com o Livewire v3, você só precisa instalar o Livewire e tudo o que você precisa é injetado automaticamente - incluindo o Alpine!
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//unpkg.com/alpinejs" defer></script>
@livewireStyles @livewireScripts
</head>
<body>
...
</body>
</html>2. Funções JavaScript em classes PHP
O Livewire v3 suportará a escrita de funções JavaScript diretamente em seus componentes de backend do Livewire. Adicione uma função ao seu componente, adicione um comentário /\*_ @js _/ acima da função e, em seguida, retorne algum código JavaScript usando a sintaxe HEREDOC do PHP e chame-o de seu frontend. O código JavaScript será executado sem enviar nenhuma solicitação ao seu back-end.
<?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. Propriedades bloqueadas
O Livewire v3 suportará propriedades bloqueadas - propriedades que não podem ser atualizadas a partir do frontend. Adicione um comentário /\*\* @locked / acima de uma propriedade em seu componente e o Livewire lançará uma exceção se alguém tentar atualizar essa propriedade a partir do frontend.
<?php
namespace App\Http\Livewire;
class Todos extends \Livewire\Component
{
/** @locked */
public $todos = [];
}
?>4. Fio: o modelo é adiado por padrão
À medida que o Livewire e seu uso evoluíram, percebemos que o comportamento 'adiado' faz mais sentido para 95% dos formulários, portanto, na v3, a funcionalidade 'adiado' será o padrão. Isso economizará solicitações desnecessárias ao seu servidor e melhorará o desempenho. Quando você precisa da funcionalidade 'live' em uma entrada, você pode usar wire:model.live para habilitar essa funcionalidade.