Як працює wire:model і в чому різниця між wire:model та wire:model.live?

`wire:model` двостороннє прив'язує поле форми до public-властивості компонента. ```blade {{-- deferred --}} {{-- одразу при вводі --}} {{-- при втраті фокуса --}} ``` - За замовчуванням значення синхронізується **deferred** - на наступній дії (наприклад, submit), що економить запити. - `.live` синхронізує одразу - потрібно для живого пошуку чи валідації, але створює запит на кожне натискання (часто комбінують із `.debounce`).

Які типові причини проблем продуктивності в Livewire і як їх уникати?

Найчастіші причини: - **Великий серіалізований стан** - Livewire серіалізує всі public-властивості в кожен запит. Тримайте в public лише необхідне; похідні дані вираховуйте у **computed properties** (`#[Computed]`). - **Надмірний `wire:model.live`** - кожне натискання шле запит. Використовуйте deferred або `.debounce`. - **Відсутність `wire:key` у циклах** - ламає узгодження DOM, спричиняє «стрибки» та зайвий ререндер. - **«Божественні» компоненти** - розбивайте на дрібніші, ізольовані. - **Завантаження всіх записів** - використовуйте пагінацію та `#[Lazy]`-компоненти. ```blade @foreach ($posts as $post) @endforeach ``` Також допомагають **islands** (частковий ререндер) та винесення важкої логіки в черги замість синхронних дій.

Питання на співбесіді: Livewire

Q: Що таке Livewire і коли його варто застосовувати?

**Livewire** дозволяє будувати реактивні інтерфейси на PHP без написання JavaScript. Компонент має серверний стан (public-властивості) та дії (методи). ```php class Counter extends Component { public int $count = 0; public function increment(): void { $this->count++; } public function render() { return view('livewire.counter'); } } ``` ```blade + {{ $count }} ``` При взаємодії Livewire робить AJAX-запит, повторно рендерить компонент на сервері й оновлює лише змінений DOM. Підходить для форм, таблиць, дашбордів у Laravel-моноліті; для складної клієнтської логіки доповнюється Alpine.js.

Найпопулярніші питання з реальних Laravel/PHP співбесід для всіх рівнів

Режим флеш-карток

Всі рівні Junior Middle Senior

Всі теми API Artisan Authentication Authorization Blade Broadcasting Caching Collections Database Debugging DevOps Eloquent Enums Events Filament Files HTTP та Request Livewire Mail Middleware MVC та архітектура Notifications Pagination Performance PHP Queues Routing Scheduling Search Seeder Service Container Service Providers Testing Архітектура Безпека Валідація Конфігурація Локалізація Масштабування Міграції Сесії

3 питання

Livewire дозволяє будувати реактивні інтерфейси на PHP без написання JavaScript. Компонент має серверний стан (public-властивості) та дії (методи).

class Counter extends Component
{
    public int $count = 0;

    public function increment(): void { $this->count++; }

    public function render() { return view('livewire.counter'); }
}

<button wire:click="increment">+</button>
<span>{{ $count }}</span>

При взаємодії Livewire робить AJAX-запит, повторно рендерить компонент на сервері й оновлює лише змінений DOM. Підходить для форм, таблиць, дашбордів у Laravel-моноліті; для складної клієнтської логіки доповнюється Alpine.js.

wire:model двостороннє прив'язує поле форми до public-властивості компонента.

<input type="text" wire:model="search"> {{-- deferred --}}
<input type="text" wire:model.live="search"> {{-- одразу при вводі --}}
<input type="text" wire:model.live.debounce.300ms="search">
<input type="text" wire:model.blur="search"> {{-- при втраті фокуса --}}

За замовчуванням значення синхронізується deferred - на наступній дії (наприклад, submit), що економить запити.
.live синхронізує одразу - потрібно для живого пошуку чи валідації, але створює запит на кожне натискання (часто комбінують із .debounce).

Найчастіші причини:

Великий серіалізований стан - Livewire серіалізує всі public-властивості в кожен запит. Тримайте в public лише необхідне; похідні дані вираховуйте у computed properties (#[Computed]).
Надмірний wire:model.live - кожне натискання шле запит. Використовуйте deferred або .debounce.
Відсутність wire:key у циклах - ламає узгодження DOM, спричиняє «стрибки» та зайвий ререндер.
«Божественні» компоненти - розбивайте на дрібніші, ізольовані.
Завантаження всіх записів - використовуйте пагінацію та #[Lazy]-компоненти.

@foreach ($posts as $post)
    <livewire:post-row :post="$post" :key="$post->id" />
@endforeach

Також допомагають islands (частковий ререндер) та винесення важкої логіки в черги замість синхронних дій.