يعد Laravel Livewire أداة رائعة لتحقيق سلوك ديناميكي على صفحة ويب ، دون كتابة تعليمات JavaScript البرمجية مباشرة. يجعل بناء واجهات ديناميكية أمرًا بسيطًا ، دون ترك راحة Laravel. في الآونة الأخيرة ، تمت إعادة كتابة Livewire core بالكامل.
يتميز الإصدار الجديد Livewire v3 باختلاف أفضل ، ويمكن بناء الميزات بشكل أسرع ، وهناك ازدواجية أقل بين Livewire و Alpine لأنها تعتمد أكثر على Alpine وتستخدم مورفها ، والتاريخ ، وغير ذلك الإضافات. أصبحت العديد من الميزات الجديدة ممكنة أيضًا من خلال إعادة هيكلة قاعدة البيانات والتركيز بشكل أكبر على Alpine.
1. قم بحقن البرامج النصية لـ Livewire والأنماط و Alpine تلقائيًا
بعد تثبيت الملحن Livewire v2 ، يجب عليك يدويًا إضافةlivewireStyles وlivewireScripts و Alpine إلى التخطيط الخاص بك. مع Livewire v3 ، تحتاج فقط إلى تثبيت Livewire وسيتم حقن كل ما تحتاجه تلقائيًا - بما في ذلك Alpine!
<! DOCTYPE html>
<أتش تي أم أل لانج ="ar">
<رأس>
<النصي src ="//unpkg.com/alpinejs" تأجيل></script>
تضمين التغريدةتضمين التغريدة
</head>
<جسم>
...
</body>
</html>2. وظائف JavaScript في فئات PHP
سوف يدعم Livewire v3 كتابة وظائف JavaScript مباشرة في مكونات Livewire الخلفية. أضف دالة إلى المكون الخاص بك ، أضف / \ * _js _ / تعليق فوق الوظيفة ، ثم أعد بعض كود JavaScript باستخدام صيغة HEREDOC الخاصة بـ PHP واستدعها من الواجهة الأمامية. سيتم تنفيذ كود JavaScript دون إرسال أي طلبات إلى الواجهة الخلفية الخاصة بك.
<؟بي أتش بي
مساحة الاسمبرنامج\المتشعب\سلك كهربائي حامل للتيار;
فصلتودوسيمتد \سلك كهربائي حامل للتيار\عنصر
{
/** @دعم */
عام المهام $؛
/** js */
عاموظيفةواضح()
{
يعود <<<'شبيبة'
this.todo = '';
شبيبة.
}
}
?>
<شعبة>
<سلك الإدخال: الموديل ="لكى يفعل" />
<سلك الزر: انقر ="واضح">واضح</button>
</div>3. خصائص مقفلة
سوف يدعم Livewire v3 الخصائص المقفلة - الخصائص التي لا يمكن تحديثها من الواجهة الأمامية. أضف / \ * \ *locked / comment فوق خاصية على المكون الخاص بك ، وسيقوم Livewire بطرح استثناء إذا حاول شخص ما تحديث هذه الخاصية من الواجهة الأمامية.
<؟بي أتش بي
مساحة الاسمبرنامج\المتشعب\سلك كهربائي حامل للتيار;
فصلتودوسيمتد \سلك كهربائي حامل للتيار\عنصر
{
/** @مقفل */
عام $ todos = [] ؛
}
?>4. السلك: النموذج مؤجل افتراضيًا
نظرًا لتطور Livewire واستخدامه ، أدركنا أن السلوك "المؤجل" يكون أكثر منطقية بالنسبة لـ 95٪ من النماذج ، لذا في الإصدار 3 من الوظائف "المؤجلة" ستكون الوظيفة الافتراضية. سيوفر هذا الطلبات غير الضرورية التي تذهب إلى الخادم الخاص بك ويحسن الأداء. عندما تحتاج إلى الوظيفة "المباشرة" على أحد المدخلات ، يمكنك استخدام wire: model.live لتمكين هذه الوظيفة.
هذا أحد التغييرات الفاصلة القليلة جدًا من الإصدار 2 إلى الإصدار 3.
5. الطلبات مجمعة
في Livewire v2 ، إذا كان لديك مكونات متعددة باستخدام wire: poll أو إيفاد والاستماع للأحداث، سيرسل كل عنصر من هذه المكونات طلبات منفصلة إلى الخادم في كل استطلاع أو حدث. في Livewire v3 ، يوجد تجميع ذكي للطلبات بحيث يتم توصيل: استطلاعات الرأي والأحداث والمستمعين و يمكن تجميع استدعاءات الطريقة في طلب واحد عندما يكون ذلك ممكنًا ، مما يؤدي إلى توفير المزيد من الطلبات والتحسين أداء.
6. الخصائص التفاعلية
في Livewire v3 ، عندما تكون تمرير جزء من البيانات إلى مكون فرعي ، أضف / \ * _prop _ / تعليق فوق الخاصية في الطفل ، ثم قم بتحديثه في المكون الرئيسي ، وسيتم تحديثه في المكون الفرعي.
<؟بي أتش بي
مساحة الاسمبرنامج\المتشعب\سلك كهربائي حامل للتيار;
فصلTodosCountيمتد \سلك كهربائي حامل للتيار\عنصر{
/** @دعم */
عام المهام $؛
عاموظيفةيجعل(){
يعود <<<'لغة البرمجة'
<شعبة>
تودوس: {{count ($ todos)}}
</div>
لغة البرمجة؛
}
}7. الوصول إلى بيانات وطرق المكون الأصلي باستخدام $ parent
في Livewire v3 ، ستكون هناك طريقة جديدة للوصول إلى بيانات وأساليب المكون الرئيسي. هناك خاصية الوالدين الجديدة التي يمكن الوصول إليها من خلال طرق الاتصال على الوالد.
<؟بي أتش بي
مساحة الاسمبرنامج\المتشعب\سلك كهربائي حامل للتيار;
فصلتودويمتد \سلك كهربائي حامل للتيار\عنصر{
/** تضمين التغريدة */
عام القيمة $ = "" ؛
عاموظيفةيجعل(){
يعود <<<'لغة البرمجة'
<شعبة>
<سلك الإدخال: الموديل ="قيمة" الأسلاك: keydown.enter ="$ parent.add ()">
</div>
لغة البرمجة؛
}
}8. النقل الفضائي
سيتضمن Livewire v3 أيضًا توجيهteleport Blade جديد سيسمح لك "بالنقل الفوري" لجزء من العلامات وجعله جزءًا آخر من DOM. يمكن أن يساعد هذا في بعض الأحيان في تجنب مشكلات الفهرس z مع الوسائط والشرائح.
<شعبة>
<سلك الزر: انقر ="showModal">عرض مشروط</button>
teleport('#تذييل')
<سلك مشروط x: الموديل ="showModal">
<!--... -->
</x-modal>
تضمين التغريدة
</div>9. مكونات كسولة
في Livewire v3 ، ما عليك سوى إضافة سمة كسولة عند عرض أحد المكونات ، ولن يتم عرضها في البداية. عندما يتعلق الأمر بإطار العرض ، سيطلق Livewire طلبًا لتقديمه. ستتمكن أيضًا من إضافة محتوى عنصر نائب عن طريق تنفيذ طريقة العنصر النائب على المكون الخاص بك.
<شعبة>
<سلك الزر: انقر ="showModal">عرض مشروط</button>
teleport('#تذييل')
<سلك مشروط x: الموديل ="showModal">
<livewire: مثال مكون lazy />
</x-modal>
تضمين التغريدة
</div>
<؟بي أتش بي
مساحة الاسمبرنامج\المتشعب\سلك كهربائي حامل للتيار;
فصلمثالمكونيمتد \سلك كهربائي حامل للتيار\عنصر{
عامثابتةوظيفةنائب(){
يعود <<<'لغة البرمجة'
<إكس سبينر />
>>>
}
عام وظيفة يجعل()/ ** [تل! الانهيار: 7] * /{
يعود <<<'لغة البرمجة'
<شعبة>
تودوس: {{count ($ todos)}}
</div>
لغة البرمجة؛
}
}
?>البساطة والقوة في Livewire V3
مزيج من البساطة والقوة هو ما يصنع Laravel Livewire رائع جدًا ولماذا يتم استخدامه من قبل العديد من المطورين. إنه بديل جيد بشكل خاص لتركيبة Laravel + Inertia + Vue. على وجه الخصوص ، يتم تجميع Laravel أيضًا مع أطر أخرى قوية وتعمل معها.
