Laravel Livewire — отличный инструмент для достижения динамического поведения веб-страницы без непосредственного написания кода JavaScript. Это упрощает создание динамических интерфейсов, не выходя из комфортного Laravel. Недавно ядро ​​Livewire было полностью переписано.

В новой версии Livewire v3 улучшено сравнение, функции создаются быстрее, а дублирования меньше. между Livewire и Alpine, потому что он больше полагается на Alpine и использует его Morph, History и другие плагины. Некоторые из новых функций также стали возможны благодаря реструктуризации кодовой базы и уделению большего внимания Alpine.

1. Автоматическое внедрение скриптов, стилей и Alpine Livewire

После установки Composer Livewire v2 вы должны вручную добавить @livewireStyles, @livewireScripts и Alpine в свой макет. С Livewire v3 вам просто нужно установить Livewire, и все, что вам нужно, вводится автоматически, включая Alpine!

<!ДОКТИП HTML>
<html язык="en">
<голова>
<источник сценария ="//unpkg.com/alpinejs" откладывать></script>
@livewireStyles@livewireScripts
</head>
<тело>
 ...
</body>
</html>

2. Функции JavaScript в классах PHP

Livewire v3 будет поддерживать написание функций JavaScript непосредственно в ваших внутренних компонентах Livewire. Добавьте функцию в свой компонент, добавьте комментарий /\*_ @js _/ над функцией, затем верните некоторый код JavaScript, используя синтаксис PHP HEREDOC, и вызовите его из своего внешнего интерфейса. Код JavaScript будет выполняться без отправки каких-либо запросов на ваш сервер.

<?php
пространство именПриложение\http\Livewire;
сортTodosрасширяет \Livewire\Компонент
{
/** @prop */
публичный $ дела;
/** @js */
публичныйфункцияпрозрачный()
 {
 возвращаться <<<'JS'
 это.todo = '';
 JS;
 }
}
?>
<див>
<входной провод: модель ="делать" />
<провод кнопки: нажмите ="прозрачный">Прозрачный</button>
</div>

3. Заблокированные свойства

Livewire v3 будет поддерживать заблокированные свойства — свойства, которые нельзя обновить из внешнего интерфейса. Добавьте комментарий /\*\* @locked/ над свойством вашего компонента, и Livewire выдаст исключение, если кто-то попытается обновить это свойство из внешнего интерфейса.

<?php
пространство именПриложение\http\Livewire;
сортTodosрасширяет \Livewire\Компонент
{
/** @заблокировано */
публичный $тодос = [];
}
?>

4. Wire: модель по умолчанию отложена

По мере развития Livewire и его использования мы поняли, что «отложенное» поведение имеет больше смысла для 95% форм, поэтому в версии 3 «отложенная» функциональность будет использоваться по умолчанию. Это избавит от ненужных запросов к вашему серверу и улучшит производительность. Когда вам нужна «живая» функциональность на входе, вы можете использовать wire: model.live, чтобы включить эту функциональность.

Это одно из очень немногих критических изменений с версии 2 на версию 3.

5. Запросы группируются

В Livewire v2, если у вас есть несколько компонентов, использующих провод: опрос или диспетчеризация и прослушивание событий, каждый из этих компонентов будет отправлять отдельные запросы на сервер при каждом опросе или событии. В Livewire v3 реализована интеллектуальная пакетная обработка запросов, чтобы связать: опросы, события, прослушиватели и вызовы методов могут быть объединены в один запрос, когда это возможно, сохраняя еще больше запросов и улучшая производительность.

6. Реактивные свойства

В Livewire v3, когда вы передать часть данных дочернему компоненту , добавьте комментарий/\*_ @prop _/ над свойством в дочернем компоненте, затем обновите его в родительском компоненте, он будет обновлен в дочернем компоненте.

<?php
пространство именПриложение\http\Livewire;
сортTodosCountрасширяет \Livewire\Компонент{
/** @prop */
публичный $ дела;
публичныйфункцияоказывать(){
 возвращаться <<<'HTML'
<див>
 Задачи: {{ count($todos) }}
</div>
 HTML;
 }
 }

7. Доступ к данным и методам родительского компонента с помощью $parent

В Livewire v3 появится новый способ доступа к данным и методам родительского компонента. Появилось новое свойство $parent, доступ к которому можно получить для вызова методов родителя.

<?php
пространство именПриложение\http\Livewire;
сортTodoInputрасширяет \Livewire\Компонент{
/** @modelable */
публичный $значение = '';
публичныйфункцияоказывать(){
 возвращаться <<<'HTML'
<див>
<входной провод: модель ="ценить" провод: keydown.enter="$родитель.добавить()">
</div>
 HTML;
 }
 }

8. Телепорт

Livewire v3 также будет включать новую директиву @teleport Blade, которая позволит вам «телепортировать» часть разметки и визуализировать ее в другой части DOM. Иногда это может помочь избежать проблем с z-индексом в модальных окнах и слайдах.

<див>
<провод кнопки: нажмите ="показатьМодал">Показать модальное</button>
@телепорт('#нижний колонтитул&апос;)
<x-модальный провод: модель="показатьМодал">
<!--... -->
</x-modal>
@endteleport
</div>

9. Ленивые компоненты

В Livewire v3 просто добавьте атрибут lazy при рендеринге компонента, и изначально он не будет рендериться. Когда он появится в окне просмотра, Livewire отправит запрос на его рендеринг. Вы также сможете добавлять замещающий контент, реализуя метод заполнителя в своем компоненте.

<див>
<провод кнопки: нажмите ="показатьМодал">Показать модальное</button>
@телепорт('#нижний колонтитул&апос;)
<x-модальный провод: модель="показатьМодал">
<livewire: пример компонента lazy/>
</x-modal>
@endteleport
</div>
<?php
пространство именПриложение\http\Livewire;
СортПримерКомпонентрасширяет \Livewire\Компонент{
публичныйстатическийфункциязаполнитель(){
возвращаться <<<'HTML'
<х-спиннер />
>>>
}
публичный функция оказывать()/** [тл! коллапс: 7] */{
 возвращаться <<<'HTML'
<див>
 Задачи: {{count($todos) }}
</div>
 HTML;
 }
}
?>

Простота и мощность в Livewire V3

Сочетание простоты и мощности — вот что делает Ларавель Livewire такой классный и почему его используют так много разработчиков. Это особенно хорошая альтернатива комбинации Laravel + Inertia + Vue. В частности, Laravel также связан с другими мощными фреймворками, с которыми можно работать.