تفاوت‌های Livewire نسخه ۲ با نسخه ۳

Livewire یک فریمورک قدرتمند برای توسعه برنامه‌های وب با استفاده از PHP و Laravel است که امکان ایجاد کامپوننت‌های داینامیک را بدون نیاز به جاوا اسکریپت فراهم می‌کند. در نسخه ۳، تغییرات و بهبودهای بسیاری در مقایسه با نسخه ۲ اعمال شده است که تجربه توسعه‌دهندگان را بهبود می‌بخشد. در این مقاله، تفاوت‌های کلیدی بین نسخه‌های ۲ و ۳ را بررسی خواهیم کرد.

تغییرات کلیدی

۱. بهینه‌سازی عملکرد و معماری

Livewire 3 با تمرکز بر کاهش تعداد درخواست‌های AJAX و بهینه‌سازی رندرینگ، عملکرد بهتری نسبت به نسخه ۲ دارد. این نسخه از یک معماری جدید برای بهبود سرعت و کاهش مصرف منابع استفاده می‌کند.

نمونه کد:

class ExampleComponent extends Component
{
    public function render()
    {
        return view('livewire.example');
    }
}

Livewire 2 در برخی موارد درخواست‌های اضافی به سرور ارسال می‌کرد که باعث کاهش سرعت اپلیکیشن‌های بزرگ می‌شد.

۲. تغییر در سیستم رندرینگ

Livewire 3 از یک سیستم رندرینگ بهینه‌تر با کاهش حجم HTML تولید شده استفاده می‌کند، در حالی که در Livewire 2 برخی از داده‌های غیرضروری در خروجی HTML باقی می‌ماند که باعث افزایش حجم صفحات و کندی بارگذاری می‌شد.

نمونه کد Livewire 2:

<div wire:id="xyz" wire:initial-data="...">
    <button wire:click="increment">+</button>
</div>

نمونه کد Livewire 3:

<div>
    <button wire:click="increment">+</button>
</div>

۳. معرفی قابلیت Morphing

در نسخه ۳، مفهوم "Morphing" معرفی شده که باعث می‌شود تغییرات DOM بدون نیاز به جایگزینی کامل انجام شود. این تغییر باعث بهبود عملکرد و کاهش چشمگیر تداخل‌های بصری در هنگام به‌روزرسانی کامپوننت‌ها می‌شود.

نمونه کد:

<div wire:morph>
    {{ $message }}
</div>

۴. پشتیبانی بهتر از Alpine.js

Livewire 3 به طور کامل با Alpine.js نسخه ۳ سازگار شده و این موضوع منجر به بهبود تعامل بین Livewire و Alpine.js شده است. در Livewire 2، برخی از ویژگی‌های Alpine.js به درستی با Livewire همگام نمی‌شدند.

نمونه کد:

<div x-data="{ open: false }">
    <button @click="open = !open">Toggle</button>
    <div x-show="open">محتوا</div>
</div>

۵. بهبود در مدیریت استیت

Livewire 3 قابلیت بهتری در مدیریت State کامپوننت‌ها دارد و مقداردهی اولیه و بروزرسانی متغیرها به شکل بهینه‌تری انجام می‌شود. در مقابل، Livewire 2 برخی از مشکلات همگام‌سازی داده‌ها را داشت.

نمونه کد:

public $count = 0;

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

۶. تغییر در نحوه استفاده از wire:model

در Livewire 3 نحوه مدیریت wire:model تغییر کرده و اکنون بهتر از گذشته با ورودی‌های فرم و فیلدهای مختلف همگام می‌شود. در Livewire 2، در برخی موارد مقداردهی دوطرفه (Two-Way Binding) با تاخیر و مشکل انجام می‌شد.

نمونه کد Livewire 2:

<input type="text" wire:model="name">

نمونه کد Livewire 3:

<input type="text" wire:model.live="name">

۷. قابلیت Precompiling

یکی از ویژگی‌های جدید Livewire 3 قابلیت Precompiling است که کامپوننت‌ها را از قبل کامپایل کرده و عملکرد برنامه را بهینه‌تر می‌کند.

نمونه کد:

php artisan livewire:compile

۸. تغییرات در wire:click و سایر اکشن‌ها

در نسخه ۳، برخی اکشن‌های wire:click، wire:keydown و ... بهینه شده‌اند و حالا رفتار طبیعی‌تری با توجه به تغییرات DOM دارند. این در حالی است که در نسخه ۲، در برخی موارد این اکشن‌ها به درستی اجرا نمی‌شدند.

نمونه کد:

<button wire:click="doSomething">Click me</button>

۹. تغییر در Hooks و Lifecycle

Livewire 3 دارای Hookهای جدید برای کنترل بهتر چرخه حیات کامپوننت‌ها است که به توسعه‌دهندگان انعطاف بیشتری می‌دهد. در نسخه ۲، برخی از این Hookها وجود نداشتند یا رفتار آن‌ها بهینه نبود.

نمونه کد:

public function mount()
{
    // مقداردهی اولیه متغیرها
}

۱۰. حذف برخی ویژگی‌های قدیمی

در Livewire 3 برخی قابلیت‌های قدیمی که منسوخ شده بودند، حذف شده‌اند. این شامل تغییراتی در defer، lazy-loading و برخی متدهای قدیمی مانند $refresh می‌شود.

نمونه کد قدیمی Livewire 2:

<input wire:model.defer="name">

نمونه کد جدید Livewire 3:

<input wire:model.live="name">

نتیجه‌گیری

Livewire 3 یک نسخه بهینه‌تر، سریع‌تر و انعطاف‌پذیرتر نسبت به نسخه ۲ است. با معرفی قابلیت‌های جدید، تجربه توسعه‌دهندگان بهبود یافته و عملکرد کلی بهینه‌تر شده است. مهاجرت به این نسخه توصیه می‌شود.