लारवेल लाइववायर सीधे जावास्क्रिप्ट कोड लिखे बिना वेब पेज पर गतिशील व्यवहार प्राप्त करने के लिए एक महान उपकरण है। यह लारवेल के आराम को छोड़े बिना गतिशील इंटरफेस बनाना आसान बनाता है। हाल ही में, लाइववायर कोर को पूरी तरह से फिर से लिखा गया है।

नए Livewire v3 में बेहतर अंतर है, सुविधाओं को तेजी से बनाया जा सकता है, और कम दोहराव है लाइववायर और अल्पाइन के बीच क्योंकि यह अल्पाइन पर अधिक निर्भर करता है और अपने मॉर्फ, इतिहास और अन्य का उपयोग करता है प्लगइन्स। कोडबेस के पुनर्गठन और अल्पाइन पर अधिक जोर देकर कई नई सुविधाओं को भी संभव बनाया गया।

1. लाइववायर लिपियों, शैलियों और अल्पाइन को स्वचालित रूप से इंजेक्ट करें

संगीतकार द्वारा Livewire v2 को स्थापित करने के बाद, आपको अपने लेआउट में मैन्युअल रूप से @livewireStyles, @livewireScripts और अल्पाइन को जोड़ना होगा। Livewire v3 के साथ, आपको बस Livewire इंस्टॉल करने की आवश्यकता है और आपको जो कुछ भी चाहिए वह स्वचालित रूप से इंजेक्ट किया जाता है - अल्पाइन सहित!

<!DOCTYPE html>
<एचटीएमएल लैंग ="एन">
<सिर>
<स्क्रिप्ट src="//unpkg.com/alpinejs" आस्थगित करें></script>
@livewireStyles@livewireScripts
</head>
<शरीर>
 ...
</body>
</html>
instagram viewer

2. PHP कक्षाओं में जावास्क्रिप्ट कार्य

लाइववायर v3 सीधे आपके बैकएंड लाइववायर घटकों में जावास्क्रिप्ट कार्यों को लिखने का समर्थन करेगा। अपने घटक में एक फ़ंक्शन जोड़ें, फ़ंक्शन के ऊपर एक /\*_ @js _/ टिप्पणी जोड़ें, फिर PHP के HEREDOC सिंटैक्स का उपयोग करके कुछ जावास्क्रिप्ट कोड वापस करें और इसे अपने फ्रंटएंड से कॉल करें। आपके बैकएंड को कोई अनुरोध भेजे बिना जावास्क्रिप्ट कोड निष्पादित किया जाएगा।

<?php
नाम स्थानअनुप्रयोग\एचटीटीपी\ताल्लुक़;
कक्षासबका विस्तार \ताल्लुक़\अवयव
{
/** @प्रॉप */
जनता $todos;
/** @js */
जनतासमारोहसाफ़()
 {
 वापस करना <<<'जे एस'
 यह तोदो = '';
 जेएस;
 }
}
?>
<डिव>
<इनपुट तार: मॉडल ="ऐसा करने के लिए" />
<बटन वायर: क्लिक ="साफ़">साफ़</button>
</div>

3. बंद गुण

Livewire v3 लॉक्ड प्रॉपर्टीज को सपोर्ट करेगा - ऐसी प्रॉपर्टीज जिन्हें फ्रंटएंड से अपडेट नहीं किया जा सकता है। अपने घटक पर एक संपत्ति के ऊपर एक /\*\* @locked / टिप्पणी जोड़ें, और अगर कोई उस संपत्ति को दृश्यपटल से अद्यतन करने का प्रयास करता है तो Livewire एक अपवाद फेंक देगा।

<?php
नाम स्थानअनुप्रयोग\एचटीटीपी\ताल्लुक़;
कक्षासबका विस्तार \ताल्लुक़\अवयव
{
/** @locked */
जनता $todos = [];
}
?>

4. तार: मॉडल डिफ़ॉल्ट रूप से स्थगित है

जैसा कि लाइववायर और इसका उपयोग विकसित हुआ है, हमने महसूस किया है कि "स्थगित" व्यवहार 95% रूपों के लिए अधिक समझ में आता है, इसलिए v3 में "आस्थगित" कार्यक्षमता डिफ़ॉल्ट होगी। यह आपके सर्वर पर जाने वाले अनावश्यक अनुरोधों को बचाएगा और प्रदर्शन में सुधार करेगा। जब आपको किसी इनपुट पर "लाइव" कार्यक्षमता की आवश्यकता होती है, तो आप उस कार्यक्षमता को सक्षम करने के लिए wire: model.live का उपयोग कर सकते हैं।

यह v2 से v3 में बहुत कम महत्वपूर्ण बदलावों में से एक है।

5. अनुरोध बैच किए गए हैं

लाइववायर v2 में, यदि आपके पास वायर का उपयोग करने वाले कई घटक हैं: पोल या घटनाओं के लिए प्रेषण और सुनना, उनमें से प्रत्येक घटक प्रत्येक मतदान या घटना पर सर्वर को अलग-अलग अनुरोध भेजेगा। लाइववायर v3 में, अनुरोधों का बुद्धिमान बैचिंग होता है ताकि तार: पोल, ईवेंट, श्रोता और विधि कॉल को जब संभव हो तो एक अनुरोध में बैच किया जा सकता है, और भी अनुरोधों को सहेज कर सुधार किया जा सकता है प्रदर्शन।

6. प्रतिक्रियाशील गुण

Livewire v3 में, जब आप चाइल्ड कंपोनेंट को डेटा का एक टुकड़ा पास करें , चाइल्ड में प्रॉपर्टी के ऊपर a/\*_ @prop _/ कमेंट जोड़ें, फिर इसे पैरेंट कंपोनेंट में अपडेट करें, इसे चाइल्ड कंपोनेंट में अपडेट किया जाएगा।

<?php
नाम स्थानअनुप्रयोग\एचटीटीपी\ताल्लुक़;
कक्षाटोडोस काउंटका विस्तार \ताल्लुक़\अवयव{
/** @प्रॉप */
जनता $todos;
जनतासमारोहप्रदान करना(){
 वापस करना <<<'एचटीएमएल'
<डिव>
 कुल राशि: {{गिनती($todos)}}
</div>
 एचटीएमएल;
 }
 }

7. $parent का उपयोग करके पैरेंट कंपोनेंट के डेटा और विधियों तक पहुँचें

Livewire v3 में, मूल घटक के डेटा और विधियों तक पहुँचने का एक नया तरीका होगा। एक नई $parent संपत्ति है जिसे माता-पिता पर कॉल विधियों के लिए एक्सेस किया जा सकता है।

<?php
नाम स्थानअनुप्रयोग\एचटीटीपी\ताल्लुक़;
कक्षाटूडूइनपुटका विस्तार \ताल्लुक़\अवयव{
/** @modelable */
जनता $ मान = '';
जनतासमारोहप्रदान करना(){
 वापस करना <<<'एचटीएमएल'
<डिव>
<इनपुट तार: मॉडल ="कीमत" तार: keydown.enter="$parent.add()">
</div>
 एचटीएमएल;
 }
 }

8. टेलीपोर्ट

Livewire v3 में एक नया @teleport Blade डायरेक्टिव भी शामिल होगा जो आपको मार्कअप के एक टुकड़े को "टेलीपोर्ट" करने और इसे DOM के दूसरे भाग को प्रस्तुत करने की अनुमति देगा। यह कभी-कभी मोडल और स्लाइडआउट के साथ जेड-इंडेक्स के मुद्दों से बचने में मदद कर सकता है।

<डिव>
<बटन वायर: क्लिक ="शोमोडल">मोडल दिखाएं</button>
@टेलीपोर्ट('#पाद&apos;)
<एक्स-मोडल वायर: मॉडल ="शोमोडल">
<!--... -->
</x-modal>
@endteleport
</div>

9. आलसी घटक

Livewire v3 में, किसी घटक को रेंडर करते समय बस एक आलसी विशेषता जोड़ें, और इसे प्रारंभ में प्रस्तुत नहीं किया जाएगा। जब यह व्यूपोर्ट में आता है, लाइववायर इसे रेंडर करने के अनुरोध को बंद कर देगा। आप अपने घटक पर प्लेसहोल्डर विधि लागू करके प्लेसहोल्डर सामग्री भी जोड़ सकेंगे।

<डिव>
<बटन वायर: क्लिक ="शोमोडल">मोडल दिखाएं</button>
@टेलीपोर्ट('#पाद&apos;)
<एक्स-मोडल वायर: मॉडल ="शोमोडल">
<लाइववायर: उदाहरण-घटक आलसी />
</x-modal>
@endteleport
</div>
<?php
नाम स्थानअनुप्रयोग\एचटीटीपी\ताल्लुक़;
कक्षाउदाहरण घटकका विस्तार \ताल्लुक़\अवयव{
जनतास्थिरसमारोहप्लेसहोल्डर(){
वापस करना <<<'एचटीएमएल'
<एक्स-स्पिनर />
>>>
}
जनता समारोह प्रदान करना()/** [टीएल! पतन: 7] */{
 वापस करना <<<'एचटीएमएल'
<डिव>
 कुल राशि: {{गिनती($todos)}}
</div>
 एचटीएमएल;
 }
}
?>

लाइववायर V3 में सरलता और शक्ति

सादगी और शक्ति का मेल ही बनाता है लारवेल लाइववायर इतना बढ़िया और इतने सारे डेवलपर्स द्वारा इसका उपयोग क्यों किया जाता है। यह विशेष रूप से Laravel + Inertia + Vue संयोजन का एक अच्छा विकल्प है। विशेष रूप से Laravel को अन्य फ्रेमवर्क के साथ बंडल किया गया है जो शक्तिशाली हैं और साथ काम करने के लिए हैं।