Laravel Livewire es una gran herramienta para lograr un comportamiento dinámico en una página web, sin escribir código JavaScript directamente. Simplifica la construcción de interfaces dinámicas, sin dejar la comodidad de Laravel. Recientemente, el núcleo de Livewire se ha reescrito por completo.
El nuevo Livewire v3 tiene mejores diferencias, las funciones se pueden crear más rápido y hay menos duplicación entre Livewire y Alpine porque depende más de Alpine y usa su Morph, History y otros complementos Varias de las nuevas características también fueron posibles al reestructurar el código base y poner un mayor énfasis en Alpine.
1. Inyectar guiones Livewire, estilos y Alpine automáticamente
Después de que composer instale Livewire v2, debe agregar manualmente @livewireStyles, @livewireScripts y Alpine a su diseño. Con Livewire v3, solo necesita instalar Livewire y todo lo que necesita se inyecta automáticamente, ¡incluido Alpine!
<!DOCTYPE html>
<idioma html="es">
<cabeza>
<secuencia de comandos src=
"//unpkg.com/alpinejs" aplazar></script>
@livewireStyles@livewireScripts
</head>
<cuerpo>
...
</body>
</html>2. Funciones de JavaScript en clases de PHP
Livewire v3 admitirá la escritura de funciones de JavaScript directamente en los componentes backend de Livewire. Agregue una función a su componente, agregue un comentario /\*_ @js _/ arriba de la función, luego devuelva un código JavaScript usando la sintaxis HEREDOC de PHP y llámelo desde su interfaz. El código JavaScript se ejecutará sin enviar ninguna solicitud a su backend.
<?php
espacio de nombresaplicación\Http\Cable de alta tensión;
claseTodosextiende \Cable de alta tensión\Componente
{
/** @apuntalar */
público $todos;
/** @js */
públicofunciónclaro()
{
devolver <<<'JS'
esto.todo = '';
JS;
}
}
?>
<división>
<cable de entrada: modelo ="hacer" />
<Cable de botón: clic ="claro">Claro</button>
</div>3. Propiedades bloqueadas
Livewire v3 admitirá propiedades bloqueadas: propiedades que no se pueden actualizar desde la interfaz. Agregue un comentario /\*\* @locked / encima de una propiedad en su componente, y Livewire generará una excepción si alguien intenta actualizar esa propiedad desde la interfaz.
<?php
espacio de nombresaplicación\Http\Cable de alta tensión;
claseTodosextiende \Cable de alta tensión\Componente
{
/** @bloqueado */
público $todo = [];
}
?>4. Cable: el modelo es diferido por defecto
A medida que Livewire y su uso han evolucionado, nos hemos dado cuenta de que el comportamiento "diferido" tiene más sentido para el 95 % de los formularios, por lo que en la v3 la funcionalidad "diferida" será la predeterminada. Esto ahorrará solicitudes innecesarias que van a su servidor y mejorará el rendimiento. Cuando necesite la funcionalidad "en vivo" en una entrada, puede usar wire: model.live para habilitar esa funcionalidad.
Este es uno de los pocos cambios importantes de v2 a v3.
5. Las solicitudes se procesan por lotes
En Livewire v2, si tiene varios componentes que usan cable: sondear o despacho y escucha de eventos, cada uno de esos componentes enviará solicitudes separadas al servidor en cada encuesta o evento. En Livewire v3, existe un procesamiento por lotes inteligente de solicitudes para conectar: encuestas, eventos, oyentes y las llamadas a métodos se pueden agrupar en una solicitud cuando sea posible, ahorrando aún más solicitudes y mejorando actuación.
6. Propiedades reactivas
En Livewire v3, cuando pasar un dato a un componente hijo , agregue un comentario/\*_ @prop _/ arriba de la propiedad en el componente secundario, luego actualícelo en el componente principal, se actualizará en el componente secundario.
<?php
espacio de nombresaplicación\Http\Cable de alta tensión;
claseTodosCountextiende \Cable de alta tensión\Componente{
/** @apuntalar */
público $todos;
públicofunciónprestar(){
devolver <<<'HTML'
<división>
Todos: {{ contar($todos) }}
</div>
HTML;
}
}7. Acceda a los datos y métodos del componente principal usando $parent
En Livewire v3, habrá una nueva forma de acceder a los datos y métodos de un componente principal. Hay una nueva propiedad $parent a la que se puede acceder para llamar a métodos en el padre.
<?php
espacio de nombresaplicación\Http\Cable de alta tensión;
claseTodoEntradaextiende \Cable de alta tensión\Componente{
/** @modelable */
público $valor = '';
públicofunciónprestar(){
devolver <<<'HTML'
<división>
<cable de entrada: modelo ="valor" cable: keydown.enter="$padre.add()">
</div>
HTML;
}
}8. teletransportarse
Livewire v3 también incluirá una nueva directiva @teleport Blade que le permitirá "teletransportar" una pieza de marcado y convertirla en otra parte del DOM. Esto a veces puede ayudar a evitar problemas de índice z con modales y diapositivas.
<división>
<Cable de botón: clic ="mostrarModal">Mostrar modal</button>
@teletransporte('#pie de página')
<Cable modal x: modelo ="mostrarModal">
<!--... -->
</x-modal>
@endteleport
</div>9. Componentes perezosos
En Livewire v3, simplemente agregue un atributo perezoso al renderizar un componente, y no se renderizará inicialmente. Cuando llega a la ventana gráfica, Livewire activará una solicitud para renderizarlo. También podrá agregar contenido de marcador de posición implementando el método de marcador de posición en su componente.
<división>
<Cable de botón: clic ="mostrarModal">Mostrar modal</button>
@teletransporte('#pie de página')
<Cable modal x: modelo ="mostrarModal">
<livewire: ejemplo-componente perezoso/>
</x-modal>
@endteleport
</div>
<?php
espacio de nombresaplicación\Http\Cable de alta tensión;
ClaseEjemploComponenteextiende \Cable de alta tensión\Componente{
públicoestáticofunciónmarcador de posición(){
devolver <<<'HTML'
<x-spinner />
>>>
}
público función prestar()/** [tl! colapsar: 7] */{
devolver <<<'HTML'
<división>
Todos: {{contar ($todos) }}
</div>
HTML;
}
}
?>Simplicidad y potencia en Livewire V3
La combinación de simplicidad y potencia es lo que hace Laravel Livewire tan impresionante y por qué es utilizado por tantos desarrolladores. Es especialmente una buena alternativa a la combinación Laravel + Inertia + Vue. En particular, Laravel también se incluye con otros marcos que son poderosos y con los que trabajar.
