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

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

Middle: питання на співбесіді з теми «Livewire»

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

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'); } } + {{ $count }} При взаємодії Livewire робить AJAX-запит, повторно рендерить компонент на сервері й оновлює лише змінений DOM. Підходить для форм, таблиць, дашбордів у Laravel-моноліті; для складної клієнтської логіки доповнюється Alpine.js.

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

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

Всі рівні Junior Middle Senior

Всі теми API 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 Архітектура Безпека Валідація Конфігурація Локалізація Міграції Сесії

2 питання

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).