Laravel Livewire е чудесен инструмент за постигане на динамично поведение на уеб страница, без директно писане на JavaScript код. Това прави изграждането на динамични интерфейси лесно, без да напуска комфорта на Laravel. Наскоро ядрото на Livewire беше напълно пренаписано.
Новият Livewire v3 има по-добра разлика, функциите могат да бъдат изградени по-бързо и има по-малко дублиране между Livewire и Alpine, защото разчита повече на Alpine и използва своите Morph, History и други добавки. Няколко от новите функции също станаха възможни чрез преструктуриране на кодовата база и поставяне на по-голям акцент върху Alpine.
1. Автоматично инжектирайте скриптове, стилове и Alpine на Livewire
След като композиторът инсталира Livewire v2, трябва ръчно да добавите @livewireStyles, @livewireScripts и Alpine към вашето оформление. С Livewire v3 просто трябва да инсталирате Livewire и всичко, от което се нуждаете, се инжектира автоматично - включително Alpine!
<!DOCTYPE html>
<html lang="en">
<глава>
<скрипт src=
"//unpkg.com/alpinejs" отлагам></script>
@livewireStyles@livewireScripts
</head>
<тяло>
...
</body>
</html>2. JavaScript функции в PHP класове
Livewire v3 ще поддържа писане на JavaScript функции директно във вашите бекенд Livewire компоненти. Добавете функция към вашия компонент, добавете /\*_ @js _/ коментар над функцията, след това върнете някакъв JavaScript код, използвайки HEREDOC синтаксиса на PHP, и го извикайте от вашия интерфейс. JavaScript кодът ще бъде изпълнен без изпращане на заявки към вашия бекенд.
<?php
пространство от именаПриложение\Http\Livewire;
класTodosсе простира \Livewire\Компонент
{
/** @prop */
публичен $todos;
/** @js */
публиченфункцияясно()
{
връщане <<<'JS'
this.todo = '';
JS;
}
}
?>
<див>
<входен проводник: модел="да направя" />
<проводник на бутона: click="ясно">ясно</button>
</div>3. Заключени свойства
Livewire v3 ще поддържа заключени свойства - свойства, които не могат да бъдат актуализирани от интерфейса. Добавете /\*\* @locked / коментар над свойство на вашия компонент и Livewire ще хвърли изключение, ако някой се опита да актуализира това свойство от интерфейса.
<?php
пространство от именаПриложение\Http\Livewire;
класTodosсе простира \Livewire\Компонент
{
/** @заключено */
публичен $todos = [];
}
?>4. Тел: моделът е отложен по подразбиране
Тъй като Livewire и неговото използване се развиха, ние осъзнахме, че „отложеното“ поведение има повече смисъл за 95% от формулярите, така че във v3 „отложената“ функционалност ще бъде по подразбиране. Това ще спести ненужни заявки към вашия сървър и ще подобри производителността. Когато имате нужда от функционалността "на живо" на вход, можете да използвате wire: model.live, за да активирате тази функционалност.
Това е една от малкото чупливи промени от v2 към v3.
5. Заявките са групирани
В Livewire v2, ако имате множество компоненти, използващи кабел: анкета или изпращане и прослушване за събития, всеки един от тези компоненти ще изпраща отделни заявки до сървъра при всяка анкета или събитие. В Livewire v3 има интелигентно групиране на заявки, така че да свързвате: анкети, събития, слушатели и извикванията на метод могат да бъдат групирани в една заявка, когато е възможно, спестявайки още повече заявки и подобрявайки се производителност.
6. Реактивни свойства
В Livewire v3, когато вие предаде част от данните на дъщерен компонент , добавете коментар/\*_ @prop _/ над свойството в дъщерния компонент, след което го актуализирайте в родителския компонент, той ще бъде актуализиран в дъщерния компонент.
<?php
пространство от именаПриложение\Http\Livewire;
класTodosCountсе простира \Livewire\Компонент{
/** @prop */
публичен $todos;
публиченфункцияизобразявам(){
връщане <<<'HTML'
<див>
Задачи: {{ count($todos) }}
</div>
HTML;
}
}7. Достъп до данните и методите на родителския компонент чрез $parent
В Livewire v3 ще има нов начин за достъп до данните и методите на родителския компонент. Има ново свойство $parent, което може да бъде достъпно за извикване на методи на родителя.
<?php
пространство от именаПриложение\Http\Livewire;
класTodoInputсе простира \Livewire\Компонент{
/** @моделируем */
публичен $стойност = '';
публиченфункцияизобразявам(){
връщане <<<'HTML'
<див>
<входен проводник: модел="стойност" проводник: keydown.enter="$parent.add()">
</div>
HTML;
}
}8. телепортирам
Livewire v3 също така ще включва нова директива @teleport Blade, която ще ви позволи да "телепортирате" част от маркирането и да я направите друга част от DOM. Това понякога може да помогне да се избегнат проблеми с z-индекс с модални и плъзгащи се изходи.
<див>
<проводник на бутона: click="showModal">Показване на модала</button>
@телепортирам('#долен колонтитул&апос;)
<x-модален проводник: модел="showModal">
<!--... -->
</x-modal>
@endteleport
</div>9. Мързеливи компоненти
В Livewire v3 просто добавете мързелив атрибут, когато изобразявате компонент, и той няма да бъде изобразен първоначално. Когато влезе в прозореца за изглед, Livewire ще изстреля заявка за изобразяването му. Също така ще можете да добавяте съдържание на контейнер, като внедрите метода на контейнера във вашия компонент.
<див>
<проводник на бутона: click="showModal">Показване на модала</button>
@телепортирам('#долен колонтитул&апос;)
<x-модален проводник: модел="showModal">
<livewire: пример-компонент lazy />
</x-modal>
@endteleport
</div>
<?php
пространство от именаПриложение\Http\Livewire;
КласПримерен компонентсе простира \Livewire\Компонент{
публиченстатиченфункцияконтейнер(){
връщане <<<'HTML'
<x-spinner />
>>>
}
публичен функция изобразявам()/** [tl! свиване: 7] */{
връщане <<<'HTML'
<див>
Задачи: {{count($todos) }}
</div>
HTML;
}
}
?>Простота и мощност в Livewire V3
Комбинацията от простота и мощност е това, което прави Laravel Livewire толкова страхотно и защо се използва от толкова много разработчици. Това е особено добра алтернатива на комбинацията Laravel + Inertia + Vue. По-специално Laravel също е в комплект с други рамки, които са мощни и с които може да се работи.
