ویژگی های جدید در Livewire توسعه وب با PHP و جاوا اسکریپت را جالب تر می کند.
Laravel Livewire یک ابزار عالی برای دستیابی به رفتار پویا در یک صفحه وب، بدون نوشتن مستقیم کد جاوا اسکریپت است. این کار ساخت رابط های پویا را ساده می کند، بدون اینکه راحتی لاراول را ترک کند. اخیراً هسته Livewire به طور کامل بازنویسی شده است.
Livewire v3 جدید تفاوت های بهتری دارد، ویژگی ها می توانند سریعتر ساخته شوند، و تکرار کمتری بین Livewire و Alpine وجود دارد، زیرا بیشتر به Alpine متکی است و از Morph، History و دیگر پلاگین های آن استفاده می کند. چندین ویژگی جدید نیز با تغییر ساختار پایگاه کد و تأکید بیشتر بر Alpine امکان پذیر شد.
1. اسکریپت‌ها، سبک‌ها و Alpine Livewire را به صورت خودکار تزریق کنید
پس از اینکه آهنگساز Livewire v2 را نصب کرد، باید @livewireStyles، @livewireScripts و Alpine را به صورت دستی به طرح‌بندی خود اضافه کنید. با Livewire v3، شما فقط باید Livewire را نصب کنید و هر چیزی که نیاز دارید به طور خودکار تزریق می شود – از جمله Alpine!
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//unpkg.com/alpinejs" defer></script>
@livewireStyles @livewireScripts
</head>
<body>
...
</body>
</html>
2. توابع جاوا اسکریپت در کلاس های PHP
Livewire v3 از نوشتن توابع جاوا اسکریپت مستقیماً در اجزای Livewire باطن شما پشتیبانی می کند. یک تابع به کامپوننت خود اضافه کنید، یک نظر /\*_ @js _/ در بالای تابع اضافه کنید، سپس مقداری کد جاوا اسکریپت را با استفاده از دستور HEREDOC PHP برگردانید و آن را از قسمت ظاهری خود فراخوانی کنید. کد جاوا اسکریپت بدون ارسال هیچ درخواستی به باطن شما اجرا می شود.
<?php
namespace App\Http\Livewire;
class Todos extends \Livewire\Component
{
/** @prop */
public $todos;
/** @js */
public function clear()
{
return <<<'JS'
this.todo = '';
JS;
}
}
?>
<div>
<input wire:model="todo" />
<button wire:click="clear">Clear</button>
</div>
3. ویژگی های قفل شده
Livewire v3 از ویژگی‌های قفل‌شده پشتیبانی می‌کند – ویژگی‌هایی که نمی‌توانند از قسمت ظاهری به‌روزرسانی شوند. یک کامنت /\*\* @locked / را بالای یک ویژگی در کامپوننت خود اضافه کنید، و اگر شخصی بخواهد آن ویژگی را از فرانت اند به روز کند، Livewire استثناء ایجاد می کند.
<?php
namespace App\Http\Livewire;
class Todos extends \Livewire\Component
{
/** @locked */
public $todos = [];
}
?>
4. سیم: مدل به طور پیش فرض به تعویق افتاده است
همانطور که Livewire و استفاده از آن تکامل یافته است، متوجه شده ایم که رفتار “به تعویق افتاده” برای 95٪ از فرم ها منطقی تر است، بنابراین در نسخه 3 عملکرد “به تاخیر افتاده” پیش فرض خواهد بود. این باعث صرفه جویی در درخواست های غیر ضروری که به سرور شما می رود و عملکرد را بهبود می بخشد. هنگامی که به عملکرد “live” در ورودی نیاز دارید، می توانید از wire:model.live برای فعال کردن آن عملکرد استفاده کنید.
این یکی از معدود تغییرات شکستن از نسخه 2 به نسخه 3 است.
5. درخواست ها دسته بندی می شوند
در Livewire v2، اگر چندین مؤلفه با استفاده از wire:poll یا ارسال و گوش دادن به رویدادها دارید، هر یک از این مؤلفه‌ها درخواست‌های جداگانه‌ای را برای هر نظرسنجی یا رویداد به سرور ارسال می‌کنند. در Livewire نسخه 3، دسته بندی هوشمند درخواست ها وجود دارد به طوری که سیم: نظرسنجی ها، رویدادها، شنوندگان و فراخوانی های روش را می توان در صورت امکان در یک درخواست دسته بندی کرد و حتی درخواست های بیشتری را ذخیره کرد و عملکرد را بهبود بخشید.
6. خواص واکنشی
در Livewire نسخه 3، وقتی یک داده را به یک مؤلفه فرزند ارسال می کنید، یک نظر /\*_ @prop _/ را بالای ویژگی فرزند اضافه کنید، سپس آن را در مؤلفه والد به روز کنید، در مؤلفه فرزند به روز می شود. .
<?php
namespace App\Http\Livewire;
class TodosCount extends \Livewire\Component{
/** @prop */
public $todos;
public function render(){
return <<<'HTML'
<div>
Todos: {{ count($todos) }}
</div>
HTML;
}
}
7. با استفاده از $parent به داده ها و روش های مؤلفه والد دسترسی پیدا کنید
در Livewire v3، راه جدیدی برای دسترسی به داده‌ها و روش‌های یک جزء والد وجود خواهد داشت. یک ویژگی جدید $parent وجود دارد که برای فراخوانی متدهای والد می توان به آن دسترسی داشت.
<?php
namespace App\Http\Livewire;
class TodoInput extends \Livewire\Component{
/** @modelable */
public $value = '';
public function render(){
return <<<'HTML'
<div>
<input wire:model="value" wire:keydown.enter="$parent.add()">
</div>
HTML;
}
}
8. تله پورت
Livewire v3 همچنین شامل یک دستورالعمل جدید @teleport Blade است که به شما امکان می دهد یک قطعه نشانه گذاری را از راه دور منتقل کنید و آن را به بخشی دیگر از DOM تبدیل کنید. این گاهی اوقات می تواند به جلوگیری از مشکلات z-index با modal ها و slideouts کمک کند.
<div>
<button wire:click="showModal">Show modal</button>
@teleport('#footer')
<x-modal wire:model="showModal">
<!-- ... -->
</x-modal>
@endteleport
</div>
9. اجزای تنبل
در Livewire v3، فقط یک ویژگی lazy را هنگام رندر کردن یک کامپوننت اضافه کنید، و در ابتدا رندر نمی شود. هنگامی که آن را به viewport می آید، Livewire درخواست ارائه آن را انجام می دهد. همچنین می‌توانید با پیاده‌سازی روش جای‌بانی در مؤلفه خود، محتوای مکان‌دار اضافه کنید.
<div>
<button wire:click="showModal">Show modal</button>
@teleport('#footer')
<x-modal wire:model="showModal">
<livewire:example-component lazy />
</x-modal>
@endteleport
</div>
<?php
namespace App\Http\Livewire;
Class ExampleComponent extends \Livewire\Component{
public static function placeholder(){
return <<<'HTML'
<x-spinner />
>>>
}
public function render() /** [tl! collapse:7] */{
return <<<'HTML'
<div>
Todos: {{count($todos) }}
</div>
HTML;
}
}
?>
سادگی و قدرت در Livewire V3
ترکیبی از سادگی و قدرت چیزی است که Laravel Livewire را بسیار عالی می کند و دلیل استفاده از آن توسط بسیاری از توسعه دهندگان است. مخصوصاً جایگزین خوبی برای ترکیب Laravel + Inertia + Vue است. به‌ویژه لاراول با فریم‌ورک‌های دیگری نیز همراه است که قدرتمند هستند و می‌توانند با آن‌ها کار کنند.