در Laracon امسال، Caleb Porzio از Livewire 4 رونمایی کرد؛ نسخهای که سه روش پراکندهٔ ساخت کامپوننتها (سنتی، Volt فانکشنال، Volt کلاسمحور) را یکپارچه کرده، سرعت را بالا برده و تجربه توسعهدهنده را ارتقاء داده.
ویژگیهای کلیدی و نمونه کد:
🔹 کامپوننتهای تکفایلی
با دستور:
php artisan make:livewire counter
یک کامپوننت کلاسمحور تکفایلی میسازد که HTML، PHP و JavaScript را کنار هم دارد:
new class extends Component {
public $count = 1;
public function increment() { $this->count++; }
public function decrement() { $this->count--; }
};<div>
<h1>{{ $count }}</h1>
<button wire:click="increment">+</button>
<button wire:click="decrement">-</button>
</div>
🔹 داخلی JavaScript
بدون نیاز به
@script`، با `this. به state دسترسی داری:<script>
this.watch('count', value => console.log('Count:', value));
</script>
🔹Interceptors
مدیریت اجرای متدها قبل از اجرا:
this.intercept('increment', ({ proceed, cancel }) => {
if (confirm('Are you sure?')) proceed();
else cancel();
});🔹 کامپوننتهای چندفایلی (MFC)
با:
php artisan make:livewire counter --mfc
سه فایل
PHP`، `Blade و JS مجزا ساخته میشود.ساختار پوشههای جدید:
*
resources/views/components/ → همه کامپوننتها*
resources/views/pages/ → صفحات*
resources/views/layouts/ → قالبهاویژگیهای PHP 8.4 در Livewire 4:
Setter/Getter برای کنترل و محاسبه:
public int $count { set => max(1, $value); }
public int $multiple { get => $this->count * 5; }کش داخلی در property hooks:
public string $expensiveData {
get => cache()->remember("data-{$this->id}", 3600, fn()=> $this->fetchData());
set => cache()->put("data-{$this->id}", $value, 3600);
}بهبود UI و تجربه کاربری:
Loading State خودکار:
<button wire:click="save" class="data-[loading]:opacity-50">Save</button>
Slots همانند Blade:
<livewire:modal>{{ $slot }}</livewire:modal>wire\:ref برای ارتباط مستقیم بین کامپوننتها:
$this->dispatch('close')->to(ref: 'modal');Blaze — بهینهسازی Blade
پیشپردازش بخشهای ثابت برای افزایش سرعت:
<x-card>
<x-slot:title>{{ $title }}</x-slot:title>
<div>{{ $content }}</div>
</x-card>
نصب:
composer require livewire/blaze
Islands Architecture
رندر فقط بخشهای لازم:
@island
<x-chart :data="$this->accountRevenue" />
@endisland
بارگذاری تنبل با Placeholder:
@island(lazy: true)
@placeholder <x-loading /> @endplaceholder
<x-heavy-component />
@endisland
اسکرول بینهایت بدون JS:
@island('posts', render: 'append')
@foreach($posts as $post) <x-post :post="$post" /> @endforeach
@endisland
<div wire:island="posts" wire:intersect="$paginator.nextPage()"></div>Polling دورهای:
@island(poll: '5s')
<div>Active Users: {{ $activeUsers }}</div>
@endisland
جمعبندی:
Livewire 4 با کامپوننتهای یکپارچه، Blaze، Islands و پشتیبانی از **PHP 8.4**، توسعه در Laravel را سریعتر، سادهتر و لذتبخشتر کرده. ساخت اپهای تعاملی با عملکرد بالا حالا از همیشه راحتتر است.
✅ کانال تخصصی لاراول
📌 @PapiDon_state
☕️ اتاق برنامهنویسی
📌 @PapiDon_coding






