ما الجديد في إطار العمل Livewire v3 Laravel؟

ما الجديد في إطار العمل Livewire v3 Laravel؟

يعد Laravel Livewire أداة رائعة لتحقيق سلوك ديناميكي على صفحة ويب ، دون كتابة تعليمات JavaScript البرمجية مباشرة. يجعل بناء واجهات ديناميكية أمرًا بسيطًا ، دون ترك Laravel المريح. في الآونة الأخيرة ، تمت إعادة كتابة Livewire core بالكامل.





يتميز الإصدار الجديد Livewire v3 باختلاف أفضل ، ويمكن بناء الميزات بشكل أسرع ، وهناك ازدواجية أقل بين Livewire و Alpine لأنها تعتمد بشكل أكبر على Alpine وتستخدم Morph و History والمكونات الإضافية الأخرى. أصبحت العديد من الميزات الجديدة ممكنة أيضًا من خلال إعادة هيكلة قاعدة البيانات والتركيز بشكل أكبر على Alpine.



اجعل فيديو اليوم

1. قم بضخ البرامج النصية لـ Livewire ، والأنماط ، و Alpine تلقائيًا

بعد تثبيت الملحن 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. وظائف JavaScript في فئات PHP

سوف يدعم Livewire v3 كتابة وظائف JavaScript مباشرة في مكونات Livewire الخلفية. أضف دالة إلى المكون الخاص بك ، أضف / \ * _js _ / تعليق فوق الوظيفة ، ثم أعد بعض كود JavaScript باستخدام صيغة HEREDOC الخاصة بـ PHP واستدعها من الواجهة الأمامية. سيتم تنفيذ كود JavaScript دون إرسال أي طلبات إلى الواجهة الخلفية الخاصة بك.

كيفية حذف النسخ الاحتياطية من آلة الزمن 
<?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 / comment فوق خاصية على المكون الخاص بك ، وسيقوم Livewire بطرح استثناء إذا حاول شخص ما تحديث هذه الخاصية من الواجهة الأمامية.



<?php 
namespace App\Http\Livewire; 
class Todos extends \Livewire\Component 
{ 
/** @locked */ 
public $todos = []; 
} 
?>

4. السلك: النموذج مؤجل افتراضيًا

نظرًا لتطور Livewire واستخدامه ، أدركنا أن السلوك 'المؤجل' يكون أكثر منطقية بالنسبة لـ 95٪ من النماذج ، لذا في الإصدار 3 من الوظائف 'المؤجلة' ستكون الوظيفة الافتراضية. سيوفر هذا الطلبات غير الضرورية التي تذهب إلى الخادم الخاص بك ويحسن الأداء. عندما تحتاج إلى الوظيفة 'المباشرة' على أحد المدخلات ، يمكنك استخدام wire: model.live لتمكين هذه الوظيفة.