Laravel Livewire یک ابزار عالی برای دستیابی به عملکرد های پویا در یک صفحه وب، بدون نوشتن مستقیم کد جاوا اسکریپت است. این ابزار ساخت رابط های پویا را ساده می‌کند. اخیراً هسته Livewire به طور کامل بازنویسی شده است. موارد جدید در Livewire v3 Laravel Framework را یاد بگیرید.
Livewire v3 جدید تفاوت هایی دارد، ویژگی ها می‌توانند سریع تر ساخته شوند، و تکرار کمتری بین Livewire و Alpine وجود دارد، زیرا بیشتر به Alpine متکی است و از Morph، History و دیگر پلاگین های آن استفاده می‌کند. چندین ویژگی جدید نیز با تغییر ساختار کد و تأکید بیشتر بر Alpine اضافه شد.
اسکریپت ها، سبک ها و 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>
توابع جاوا اسکریپت در کلاس PHP
Livewire v3 از نوشتن توابع جاوا اسکریپت در اجزای Livewire شما پشتیبانی می‌کند. یک تابع به Component خود اضافه کنید، یک /\*_ @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>
ویژگی های قفل شده
Livewire v3 از ویژگی های قفل شده پشتیبانی می‌کند. ویژگی هایی که نمی‌توانند از قسمت ظاهری به‌روزرسانی شوند. یک کامنت /\*\* @locked / را بالای یک ویژگی در کامپوننت خود اضافه کنید. اگر شخصی بخواهد آن ویژگی را از Frontend به روز کند، Livewire استثناء ایجاد می‌کند.
<?php
namespace App\Http\Livewire;
class Todos extends \Livewire\Component
{
/** @locked */
public $todos = [];
}
?>
Wire: مدل به طور پیش فرض به تعویق افتاده است
همانطور که Livewire تکامل یافته است، متوجه شدیم که رفتار “deferred” برای 95٪ از فرم ها منطقی تر است. بنابراین در نسخه 3 عملکرد deferred پیش فرض خواهد بود. این باعث کاهش درخواست های غیر ضروری و بهبود عملکرد می‌شود. هنگامی که به عملکرد “live” نیاز دارید، می‌توانید از wire:model.live برای فعال کردن آن عملکرد استفاده کنید.
این یکی از معدود تغییرات از نسخه 2 به نسخه 3 است.
موارد جدید در Livewire v3 Laravel Framework : درخواست ها دسته بندی می‌شوند
در Livewire v2، اگر چندین مؤلفه با استفاده از wire:poll دارید، هر یک از این مؤلفه ها درخواست های جداگانه را برای نظرسنجی ها یا رویداد ها به سرور ارسال می‌کنند. در Livewire نسخه 3، دسته بندی هوشمند درخواست ها وجود دارد به طوری که Wire: نظرسنجی ها، رویدادها، شنوندگان و فراخوانی ها را میتوان در صورت امکان در یک درخواست دسته بندی کرد و حتی درخواست های بیشتری را ذخیره کرد و عملکرد را بهبود بخشید.
موارد جدید در Livewire v3 Laravel Framework : خواص واکنشی
در 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;
}
}
با استفاده از $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;
}
}
تله پورت
Livewire v3 همچنین شامل یک دستورالعمل جدید @teleport Blade است که به شما امکان می‌دهد یک قطعه نشانه گذاری شده را از راه دور منتقل کنید و آن را به بخشی دیگر از DOM تبدیل کنید. این گاهی اوقات می‌تواند به جلوگیری از مشکلات z-index با modals و slideout کمک کند.
<div>
<button wire:click=”showModal”>Show modal</button>
@teleport(‘#footer')
<x-modal wire:model=”showModal”>
<!– … –>
</x-modal>
@endteleport
</div>
اجزای Lazy
در 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 است. به ویژه Laravel با framework های دیگری نیز همراه است که قدرتمند هستند و می‌توانند با آنها کار کنند.
نظرات کاربران