O Laravel Livewire é uma ótima ferramenta para obter um comportamento dinâmico em uma página da Web, sem escrever diretamente o código JavaScript. Ele simplifica a construção de interfaces dinâmicas, sem sair do conforto do Laravel. Recentemente, o núcleo do Livewire foi completamente reescrito.
O novo Livewire v3 tem melhores diferenças, os recursos podem ser construídos mais rapidamente e há menos duplicação entre Livewire e Alpine porque depende mais da Alpine e usa seu Morph, History e outros plug-ins. Vários dos novos recursos também foram possibilitados pela reestruturação da base de código e pela ênfase maior no Alpine.
1. Injetar scripts, estilos e Alpine Livewire automaticamente
Após o composer 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 idioma ="pt">
<cabeça>
<script origem=
"//unpkg.com/alpinejs" adiar></script>
@livewireStyles@livewireScripts
</head>
<corpo>
...
</body>
</html>2. Funções JavaScript em classes PHP
O Livewire v3 suportará a gravação de funções JavaScript diretamente em seus componentes Livewire de back-end. 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 front-end. O código JavaScript será executado sem enviar nenhuma solicitação ao seu back-end.
<?php
namespaceAplicativo\Http\Livewire;
aulaTodosestende \Livewire\Componente
{
/** @suporte */
público $todos;
/** @js */
públicofunçãoclaro()
{
retornar <<<'js'
this.todo = '';
JS;
}
}
?>
<div>
<fio de entrada: modelo ="pendência" />
<fio do botão: clique ="claro">Claro</button>
</div>3. Propriedades bloqueadas
O Livewire v3 oferecerá suporte a propriedades bloqueadas - propriedades que não podem ser atualizadas no 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
namespaceAplicativo\Http\Livewire;
aulaTodosestende \Livewire\Componente
{
/** @locked */
público $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 "adiada" será o padrão. Isso economizará solicitações desnecessárias indo para o seu servidor e melhorará o desempenho. Quando você precisar da funcionalidade "ao vivo" em uma entrada, poderá usar wire: model.live para habilitar essa funcionalidade.
Esta é uma das poucas mudanças significativas de v2 para v3.
5. As solicitações são em lote
No Livewire v2, se você tiver vários componentes usando fio: enquete ou despachando e ouvindo eventos, cada um desses componentes enviará solicitações separadas para o servidor em cada votação ou evento. No Livewire v3, há lotes inteligentes de solicitações para que as conexões: enquetes, eventos, ouvintes e chamadas de método podem ser agrupadas em uma solicitação quando possível, economizando ainda mais solicitações e melhorando desempenho.
6. Propriedades reativas
No Livewire v3, quando você passar um pedaço de dados para um componente filho , adicione um comentário/\*_ @prop _/ acima da propriedade no filho e atualize-o no componente pai, ele será atualizado no componente filho.
<?php
namespaceAplicativo\Http\Livewire;
aulaTodosContagemestende \Livewire\Componente{
/** @suporte */
público $todos;
públicofunçãorenderizar(){
retornar <<<'HTML'
<div>
Todos: {{ count($todos) }}
</div>
HTML;
}
}7. Acesse os dados e métodos do componente pai usando $parent
No Livewire v3, haverá uma nova maneira de acessar os dados e métodos de um componente pai. Há uma nova propriedade $parent que pode ser acessada para chamar métodos no pai.
<?php
namespaceAplicativo\Http\Livewire;
aulaTodoInputestende \Livewire\Componente{
/** @modelável */
público $valor = '';
públicofunçãorenderizar(){
retornar <<<'HTML'
<div>
<fio de entrada: modelo ="valor" fio: keydown.enter="$parent.add()">
</div>
HTML;
}
}8. teleporte
O Livewire v3 também incluirá uma nova diretiva @teleport Blade que permitirá a você "teleportar" uma parte da marcação e renderizá-la em outra parte do DOM. Às vezes, isso pode ajudar a evitar problemas de índice z com modais e slideouts.
<div>
<fio do botão: clique ="showModal">Mostrar modal</button>
@teleporte('#rodapé&após;)
<fio x-modal: modelo="showModal">
<!--... -->
</x-modal>
@endteleport
</div>9. Componentes preguiçosos
No Livewire v3, basta adicionar um atributo lento ao renderizar um componente e ele não será renderizado inicialmente. Quando chegar à viewport, o Livewire disparará uma solicitação para renderizá-lo. Você também poderá adicionar conteúdo de espaço reservado implementando o método de espaço reservado em seu componente.
<div>
<fio do botão: clique ="showModal">Mostrar modal</button>
@teleporte('#rodapé&após;)
<fio x-modal: modelo="showModal">
<livewire: exemplo-componente preguiçoso />
</x-modal>
@endteleport
</div>
<?php
namespaceAplicativo\Http\Livewire;
AulaExemploComponenteestende \Livewire\Componente{
públicoestáticofunçãoespaço reservado(){
retornar <<<'HTML'
<x-spinner />
>>>
}
público função renderizar()/** [tl! colapso: 7] */{
retornar <<<'HTML'
<div>
Todos: {{count($todos) }}
</div>
HTML;
}
}
?>Simplicidade e poder no Livewire V3
A combinação de simplicidade e poder é o que torna Laravel LivewireName tão incrível e por que é usado por tantos desenvolvedores. É especialmente uma boa alternativa à combinação Laravel + Inertia + Vue. Em particular, o Laravel também é empacotado com outros frameworks que são poderosos e com os quais trabalhar.
