Laravel Livewire 3 трансформує спосіб, яким PHP-розробники створюють реактивні, динамічні інтерфейси без написання JavaScript. Випущений як значна еволюція фреймворку, Livewire 3 приносить інтеграцію з Alpine.js, покращену продуктивність завдяки морфінгу та чистіший синтаксис компонентів, який робить застосунки реального часу природними для екосистеми Laravel.

Ключова Зміна в Livewire 3

Livewire 3 використовує Alpine.js внутрішньо і вимагає директив @livewireStyles та @livewireScripts у layout. Директива wire:model тепер за замовчуванням використовує ліниве зв'язування—використовуйте wire:model.live для оновлень у реальному часі.

Архітектура Livewire 3 та Реактивне Зв'язування

Livewire працює через простий, але потужний концепт: PHP-компоненти, які повторно рендеряться на сервері та надсилають HTML-різниці назад до браузера. Кожен компонент зберігає стан між запитами через механізм серіалізації, який зберігає значення властивостей.

Архітектура фундаментально відрізняється від реактивності на основі JavaScript. Замість підтримки віртуального DOM на клієнті, Livewire серіалізує стан компонента, надсилає його з кожним запитом та морфить DOM на основі відповіді сервера. Цей підхід зберігає бізнес-логіку в PHP, одночасно забезпечуючи реактивний досвід, який очікують користувачі.

app/Livewire/SearchUsers.phpphp

<?php

namespace App\Livewire;

use App\Models\User;
use Livewire\Component;
use Livewire\WithPagination;
use Livewire\Attributes\Url;

class SearchUsers extends Component
{
    use WithPagination;

    #[Url] // Синхронізує властивість з URL query string
    public string $search = '';

    #[Url]
    public string $role = '';

    public function updatedSearch(): void
    {
        // Скидання пагінації при зміні пошуку
        $this->resetPage();
    }

    public function render()
    {
        return view('livewire.search-users', [
            'users' => User::query()
                ->when($this->search, fn($q) => $q->where('name', 'like', "%{$this->search}%"))
                ->when($this->role, fn($q) => $q->where('role', $this->role))
                ->paginate(10),
        ]);
    }
}

Атрибут #[Url] автоматично синхронізує властивості з параметрами URL-запиту, дозволяючи створювати посилання на відфільтровані представлення без додаткового коду. Хук життєвого циклу updatedSearch спрацьовує при зміні властивості search, скидаючи пагінацію на першу сторінку.

Синтаксис Компонентів Livewire 3 з Атрибутами PHP 8

Livewire 3 використовує атрибути PHP 8 для конфігурації, замінюючи попередній підхід на основі методів. Цей декларативний стиль покращує читабельність та зменшує шаблонний код у компонентах.

app/Livewire/CreatePost.phpphp

<?php

namespace App\Livewire;

use App\Models\Post;
use Livewire\Component;
use Livewire\Attributes\Rule;
use Livewire\Attributes\Locked;
use Livewire\Attributes\Computed;

class CreatePost extends Component
{
    #[Locked] // Не може бути змінена з фронтенду
    public int $userId;

    #[Rule('required|min:5|max:200')]
    public string $title = '';

    #[Rule('required|min:50')]
    public string $content = '';

    #[Rule('nullable|array')]
    public array $tags = [];

    public function mount(): void
    {
        $this->userId = auth()->id();
    }

    #[Computed]
    public function wordCount(): int
    {
        return str_word_count($this->content);
    }

    public function save(): void
    {
        $validated = $this->validate();

        Post::create([
            'user_id' => $this->userId,
            ...$validated,
        ]);

        $this->reset(['title', 'content', 'tags']);
        $this->dispatch('post-created');
    }

    public function render()
    {
        return view('livewire.create-post');
    }
}

Атрибут #[Locked] запобігає маніпуляції чутливими властивостями з фронтенду—це критично для безпеки при передачі ідентифікаторів або дозволів. Атрибути #[Rule] визначають валідацію inline, тоді як #[Computed] кешує дорогі обчислення до зміни залежностей.

Міркування Щодо Безпеки

Завжди використовуйте #[Locked] для ідентифікаторів користувачів, прапорців дозволів та будь-яких даних, які не повинні бути змінені з браузера. Livewire передає стан компонента з кожним запитом, роблячи незахищені властивості вразливими до модифікації.

Валідація Форм у Реальному Часі та Зворотний Зв'язок

Livewire відмінно справляється з наданням миттєвого зворотного зв'язку валідації без перезавантаження сторінки. Фреймворк валідує властивості під час введення користувачем, відображаючи помилки поруч з полями форми в реальному часі.

app/Livewire/RegistrationForm.phpphp

<?php

namespace App\Livewire;

use App\Models\User;
use Livewire\Component;
use Livewire\Attributes\Rule;
use Livewire\Attributes\Validate;
use Illuminate\Validation\Rules\Password;

class RegistrationForm extends Component
{
    #[Rule('required|email|unique:users,email')]
    public string $email = '';

    #[Rule('required|min:2|max:50')]
    public string $name = '';

    public string $password = '';
    public string $passwordConfirmation = '';

    public function rules(): array
    {
        return [
            'password' => [
                'required',
                'confirmed',
                Password::min(8)->mixedCase()->numbers(),
            ],
        ];
    }

    public function updated(string $property): void
    {
        // Валідація окремої властивості при зміні
        $this->validateOnly($property);
    }

    public function register(): void
    {
        $validated = $this->validate();

        $user = User::create([
            'email' => $validated['email'],
            'name' => $validated['name'],
            'password' => bcrypt($validated['password']),
        ]);

        auth()->login($user);
        $this->redirect('/dashboard');
    }

    public function render()
    {
        return view('livewire.registration-form');
    }
}

Відповідний Blade-шаблон використовує wire:model.blur для запуску валідації, коли користувач залишає поле, балансуючи між чуйністю та навантаженням на сервер:

blade

{{-- resources/views/livewire/registration-form.blade.php --}}
<form wire:submit="register" class="space-y-4">
    <div>
        <label for="email" class="block text-sm font-medium">Email</label>
        <input 
            wire:model.blur="email" 
            type="email" 
            id="email"
            class="mt-1 block w-full rounded-md border-gray-300"
        >
        @error('email')
            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
        @enderror
    </div>

    <div>
        <label for="password" class="block text-sm font-medium">Пароль</label>
        <input 
            wire:model.blur="password" 
            type="password" 
            id="password"
            class="mt-1 block w-full rounded-md border-gray-300"
        >
        @error('password')
            <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
        @enderror
    </div>

    <div>
        <label for="passwordConfirmation" class="block text-sm font-medium">Підтвердіть Пароль</label>
        <input 
            wire:model.blur="passwordConfirmation" 
            type="password" 
            id="passwordConfirmation"
            class="mt-1 block w-full rounded-md border-gray-300"
        >
    </div>

    <button 
        type="submit" 
        class="w-full bg-indigo-600 text-white py-2 px-4 rounded-md"
        wire:loading.attr="disabled"
    >
        <span wire:loading.remove>Зареєструватися</span>
        <span wire:loading>Обробка...</span>
    </button>
</form>

Цей патерн демонструє сильні сторони Livewire: логіка валідації на сервері з чуйністю на клієнті, стани завантаження без JavaScript та чіткий поділ між логікою компонента та презентацією.

Комунікація Між Батьківським та Дочірнім Компонентами через Події

Складні інтерфейси часто вимагають кількох компонентів Livewire, які комунікують між собою. Livewire 3 надає вдосконалену систему подій для цієї мети, використовуючи патерн dispatch та атрибут #[On].

app/Livewire/TaskBoard.php - Батьківський компонентphp

<?php

namespace App\Livewire;

use App\Models\Task;
use Livewire\Component;
use Livewire\Attributes\On;

class TaskBoard extends Component
{
    public array $columns = ['todo', 'in_progress', 'done'];

    #[On('task-moved')]
    public function handleTaskMoved(int $taskId, string $newStatus): void
    {
        Task::where('id', $taskId)->update(['status' => $newStatus]);
    }

    #[On('task-created')]
    public function refreshBoard(): void
    {
        // Компонент автоматично перерендерюється
    }

    public function render()
    {
        return view('livewire.task-board', [
            'tasks' => Task::all()->groupBy('status'),
        ]);
    }
}

app/Livewire/TaskCard.php - Дочірній компонентphp

<?php

namespace App\Livewire;

use App\Models\Task;
use Livewire\Component;

class TaskCard extends Component
{
    public Task $task;

    public function moveToStatus(string $status): void
    {
        $this->dispatch('task-moved', taskId: $this->task->id, newStatus: $status);
    }

    public function render()
    {
        return view('livewire.task-card');
    }
}

Події за замовчуванням спливають вгору по ієрархії компонентів. Для комунікації між компонентами поза відношенням батько-дитина, події можуть націлюватися на конкретні компоненти, використовуючи $this->dispatch('event-name')->to(ComponentClass::class).

Готовий до співбесід з Laravel?

Практикуйся з нашими інтерактивними симуляторами, flashcards та технічними тестами.

Відкрий Laravel

Інтеграція Alpine.js для Інтерактивності на Клієнті

Livewire 3 постачається з вбудованим Alpine.js, що дозволяє гібридні патерни, де деякі взаємодії відбуваються на клієнті, тоді як інші потребують комунікації з сервером. Ця комбінація зменшує навантаження на сервер для простих UI-перемикачів, зберігаючи серверну модель Livewire для складної логіки.

blade

{{-- resources/views/livewire/notification-dropdown.blade.php --}}
<div 
    x-data="{ 
        open: false,
        unreadCount: @entangle('unreadCount')
    }"
    class="relative"
>
    <button @click="open = !open" class="relative p-2">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                  d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
        </svg>
        <span 
            x-show="unreadCount > 0"
            x-text="unreadCount"
            class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center"
        ></span>
    </button>

    <div 
        x-show="open" 
        @click.outside="open = false"
        x-transition
        class="absolute right-0 mt-2 w-80 bg-white rounded-lg shadow-lg"
    >
        @foreach($notifications as $notification)
            <div 
                wire:click="markAsRead({{ $notification->id }})"
                class="p-4 border-b hover:bg-gray-50 cursor-pointer"
            >
                <p class="font-medium">{{ $notification->title }}</p>
                <p class="text-sm text-gray-600">{{ $notification->message }}</p>
            </div>
        @endforeach
    </div>
</div>

Директива @entangle створює двостороннє зв'язування між станом Alpine.js та властивостями Livewire. Зміни в unreadCount як в Alpine, так і в Livewire автоматично синхронізуються між собою, дозволяючи оптимістичні оновлення UI при збереженні авторитету сервера.

Завантаження Файлів з Відстеженням Прогресу

Livewire забезпечує обробку завантаження файлів з вбудованим відстеженням прогресу, валідацією та тимчасовим зберіганням. Трейт WithFileUploads додає всю необхідну функціональність до будь-якого компонента.

app/Livewire/DocumentUploader.phpphp

<?php

namespace App\Livewire;

use Livewire\Component;
use Livewire\WithFileUploads;
use Livewire\Attributes\Rule;
use Illuminate\Support\Facades\Storage;

class DocumentUploader extends Component
{
    use WithFileUploads;

    #[Rule('required|file|mimes:pdf,docx|max:10240')] // max 10MB
    public $document;

    public ?string $uploadedPath = null;

    public function updatedDocument(): void
    {
        $this->validate();
    }

    public function save(): void
    {
        $this->validate();

        $this->uploadedPath = $this->document->store('documents', 'public');

        $this->dispatch('document-uploaded', path: $this->uploadedPath);
        $this->reset('document');
    }

    public function render()
    {
        return view('livewire.document-uploader');
    }
}

blade

{{-- resources/views/livewire/document-uploader.blade.php --}}
<div class="space-y-4">
    <div 
        x-data="{ uploading: false, progress: 0 }"
        x-on:livewire-upload-start="uploading = true"
        x-on:livewire-upload-finish="uploading = false; progress = 0"
        x-on:livewire-upload-error="uploading = false"
        x-on:livewire-upload-progress="progress = $event.detail.progress"
    >
        <input 
            type="file" 
            wire:model="document"
            accept=".pdf,.docx"
            class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:bg-indigo-50 file:text-indigo-700"
        >

        <div x-show="uploading" class="mt-2">
            <div class="bg-gray-200 rounded-full h-2">
                <div 
                    class="bg-indigo-600 h-2 rounded-full transition-all duration-300"
                    :style="'width: ' + progress + '%'"
                ></div>
            </div>
            <p class="text-sm text-gray-600 mt-1" x-text="'Завантаження: ' + progress + '%'"></p>
        </div>
    </div>

    @error('document')
        <p class="text-sm text-red-600">{{ $message }}</p>
    @enderror

    @if($document)
        <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
            <span class="text-sm">{{ $document->getClientOriginalName() }}</span>
            <button wire:click="save" class="bg-indigo-600 text-white px-4 py-2 rounded-md text-sm">
                Завантажити
            </button>
        </div>
    @endif
</div>

Шаблон поєднує Alpine.js для візуалізації прогресу на клієнті з подіями завантаження Livewire. Файли спочатку завантажуються до тимчасового сховища, що дозволяє попередній перегляд та валідацію перед остаточним збереженням.

Питання на Співбесідах для Розробників Livewire 3

Технічні співбесіди часто досліджують розуміння архітектури Livewire, моделі безпеки та характеристик продуктивності. Наступні питання часто з'являються при найманні Laravel-розробників з досвідом Livewire.

Основні Області Співбесіди

Інтерв'юери оцінюють три основні області: розуміння життєвого циклу запитів Livewire, усвідомлення безпеки щодо публічних властивостей та здатність оптимізувати продуктивність компонентів. Демонстрація знань про те, коли НЕ використовувати Livewire, так само важлива, як і знання того, як його використовувати.

Як Livewire підтримує стан компонента між запитами?

Livewire серіалізує всі публічні властивості в payload, який подорожує з кожним запитом. Стан компонента кодується, підписується для запобігання підробки та надсилається до браузера. При наступних взаємодіях цей payload повертається на сервер, де Livewire реконструює екземпляр компонента перед обробкою дії.

Які проблеми безпеки існують з публічними властивостями Livewire, і як Livewire їх вирішує?

Публічні властивості вразливі, оскільки вони включені в серіалізований payload, що надсилається до браузера. Зловмисні користувачі можуть модифікувати цей payload перед відправкою назад. Livewire вирішує це через перевірку контрольної суми—будь-яка підробка призводить до невдачі запиту. Крім того, атрибут #[Locked] позначає властивості як тільки серверні, запобігаючи їх модифікації з фронтенду навіть якщо контрольні суми були скомпрометовані.

Поясніть різницю між wire:model, wire:model.live та wire:model.blur.

У Livewire 3 wire:model за замовчуванням використовує відкладене зв'язування—властивість оновлюється лише коли запускається дія (як відправка форми). wire:model.live оновлює властивість при кожній зміні введення, запускаючи комунікацію з сервером при кожному натисканні клавіші. wire:model.blur оновлює, коли елемент втрачає фокус, балансуючи між чуйністю та зменшеним навантаженням на сервер. Модифікатор .debounce додає затримку до live-оновлень: wire:model.live.debounce.500ms.

Коли розробник повинен обрати Livewire замість Inertia.js або JavaScript-фреймворку?

Livewire найкраще підходить, коли команда має сильну експертизу PHP, але обмежений досвід JavaScript, коли вимоги SEO надають перевагу контенту, що рендериться на сервері, або коли застосунок включає складні форми з валідацією на сервері. Inertia.js або JavaScript-фреймворки краще підходять для високоінтерактивних дашбордів зі складним станом на клієнті, застосунків, що вимагають офлайн-функціональності, або команд з JavaScript-експертизою, які віддають перевагу ментальній моделі SPA.

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

Ключові оптимізації включають: використання wire:model.blur замість wire:model.live для зменшення запитів, впровадження #[Computed] для дорогих обчислень для увімкнення кешування, ліниве завантаження компонентів з wire:init для продуктивності початкового рендерингу, використання пагінації для обмеження даних, що надсилаються в кожному запиті, та уникнення непотрібних повторних рендерингів через обмеження області реактивних властивостей. Для списків атрибут wire:key допомагає Livewire ефективно відстежувати елементи під час морфінгу.

Для глибшого вивчення системи подій Laravel, що використовується разом з Livewire, можна переглянути питання співбесіди про події та слухачі. Розуміння патернів dependency injection також виявляється цінним при структуруванні складних компонентів Livewire.

Ефективне Тестування Компонентів Livewire

Livewire надає плавний API тестування, який інтегрується з тестовим фреймворком Laravel. Тести можуть симулювати взаємодії користувача, перевіряти стан компонента та верифікувати вивід DOM.

tests/Feature/Livewire/SearchUsersTest.phpphp

<?php

namespace Tests\Feature\Livewire;

use App\Livewire\SearchUsers;
use App\Models\User;
use Illuminate\Foundation\Testing\RefreshDatabase;
use Livewire\Livewire;
use Tests\TestCase;

class SearchUsersTest extends TestCase
{
    use RefreshDatabase;

    public function test_can_search_users_by_name(): void
    {
        User::factory()->create(['name' => 'John Doe', 'role' => 'admin']);
        User::factory()->create(['name' => 'Jane Smith', 'role' => 'user']);

        Livewire::test(SearchUsers::class)
            ->set('search', 'John')
            ->assertSee('John Doe')
            ->assertDontSee('Jane Smith');
    }

    public function test_can_filter_by_role(): void
    {
        User::factory()->create(['name' => 'Admin User', 'role' => 'admin']);
        User::factory()->create(['name' => 'Regular User', 'role' => 'user']);

        Livewire::test(SearchUsers::class)
            ->set('role', 'admin')
            ->assertSee('Admin User')
            ->assertDontSee('Regular User');
    }

    public function test_pagination_resets_on_search_change(): void
    {
        User::factory()->count(25)->create();

        Livewire::test(SearchUsers::class)
            ->call('gotoPage', 2)
            ->assertSet('paginators.page', 2)
            ->set('search', 'test')
            ->assertSet('paginators.page', 1);
    }

    public function test_url_reflects_search_parameters(): void
    {
        Livewire::withQueryParams(['search' => 'existing'])
            ->test(SearchUsers::class)
            ->assertSet('search', 'existing');
    }
}

Набір тестів охоплює функціональність, управління станом та синхронізацію URL. Для комплексних стратегій тестування Laravel, включаючи компоненти Livewire, стаття найкращі практики тестування Laravel надає додаткові патерни та техніки.

Висновок

Livewire 3 дозволяє створювати реактивні інтерфейси на чистому PHP через рендеринг на сервері та морфінг DOM, усуваючи потребу в окремих JavaScript-фреймворках у багатьох Laravel-застосунках
Атрибути PHP 8 (#[Rule], #[Locked], #[Computed], #[Url]) забезпечують декларативну конфігурацію, що покращує читабельність коду та безпеку
Вбудована інтеграція Alpine.js дозволяє гібридні патерни, де прості взаємодії залишаються на клієнті, тоді як складна логіка залишається на сервері
Безпека вимагає уваги: використовуйте #[Locked] для чутливих властивостей та розумійте, що публічні властивості подорожують у кожному payload запиту
Оптимізація продуктивності зосереджена на зменшенні round-trip через відповідні модифікатори wire:model та впровадженні computed properties для дорогих операцій
Питання співбесід фокусуються на розумінні архітектури, усвідомленні безпеки та знанні того, коли альтернативні підходи (Inertia.js, SPA) краще відповідають вимогам

Починай практикувати!

Перевір свої знання з нашими симуляторами співбесід та технічними тестами.

Створити безкоштовний обліковий запис

Laravel Livewire 3 у 2026 році: Реактивні Застосунки та Питання на Співбесідах

Архітектура Livewire 3 та Реактивне Зв'язування

Синтаксис Компонентів Livewire 3 з Атрибутами PHP 8

Валідація Форм у Реальному Часі та Зворотний Зв'язок

Комунікація Між Батьківським та Дочірнім Компонентами через Події

Готовий до співбесід з Laravel?

Інтеграція Alpine.js для Інтерактивності на Клієнті

Завантаження Файлів з Відстеженням Прогресу

Питання на Співбесідах для Розробників Livewire 3

Ефективне Тестування Компонентів Livewire

Висновок

Починай практикувати!

Пов'язані статті

Тестування Laravel у 2026: Pest, Mocking та питання технічних співбесід

Laravel 12 у 2026 році: нові можливості, Starter Kits та питання для співбесіди

Черги та завдання в Laravel: асинхронна архітектура та питання на співбесідах 2026