Το Laravel Livewire είναι ένα εξαιρετικό εργαλείο για την επίτευξη δυναμικής συμπεριφοράς σε μια ιστοσελίδα, χωρίς απευθείας εγγραφή κώδικα JavaScript. Κάνει τη δημιουργία δυναμικών διεπαφών απλή, χωρίς να αφήνει την άνεση της Laravel. Πρόσφατα, ο πυρήνας 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">
<κεφάλι>
<σενάριο src="//unpkg.com/alpinejs" αναβάλλω></script>
@livewireStyles@livewireScripts
</head>
<σώμα>
...
</body>
</html>2. Λειτουργίες JavaScript σε τάξεις PHP
Το Livewire v3 θα υποστηρίζει τη σύνταξη συναρτήσεων JavaScript απευθείας στα στοιχεία του Livewire του backend. Προσθέστε μια συνάρτηση στο στοιχείο σας, προσθέστε ένα σχόλιο /\*_ @js _/ πάνω από τη συνάρτηση και, στη συνέχεια, επιστρέψτε κάποιο κώδικα JavaScript χρησιμοποιώντας τη σύνταξη HEREDOC της PHP και καλέστε τον από το περιβάλλον σας. Ο κώδικας JavaScript θα εκτελεστεί χωρίς αποστολή αιτημάτων στο backend σας.
<?php
χώρο ονομάτωνApp\Http\Livewire;
τάξηTodosεκτείνεται \Livewire\Συστατικό
{
/** @στήριγμα */
δημόσιο $todos;
/** @js */
δημόσιολειτουργίαΣαφή()
{
ΕΠΙΣΤΡΟΦΗ <<<'JS'
αυτό.todo = '';
JS;
}
}
?>
<div>
<καλώδιο εισόδου: μοντέλο="να κάνω" />
<σύρμα κουμπιού: κλικ="Σαφή">Σαφή</button>
</div>3. Κλειδωμένες ιδιότητες
Το Livewire v3 θα υποστηρίζει κλειδωμένες ιδιότητες - ιδιότητες που δεν μπορούν να ενημερωθούν από το frontend. Προσθέστε ένα σχόλιο /\*\* @locked / πάνω από μια ιδιότητα στο στοιχείο σας και το Livewire θα δημιουργήσει μια εξαίρεση εάν κάποιος επιχειρήσει να ενημερώσει αυτήν την ιδιότητα από το frontend.
<?php
χώρο ονομάτωνApp\Http\Livewire;
τάξηTodosεκτείνεται \Livewire\Συστατικό
{
/** @κλειδωμένο */
δημόσιο $todos = [];
}
?>4. Wire: Το μοντέλο έχει αναβληθεί από προεπιλογή
Καθώς το Livewire και η χρήση του έχουν εξελιχθεί, συνειδητοποιήσαμε ότι η συμπεριφορά "αναβολής" είναι πιο λογική για το 95% των φορμών, επομένως στο v3 η "αναβαλλόμενη" λειτουργικότητα θα είναι η προεπιλογή. Αυτό θα εξοικονομήσει περιττά αιτήματα που πηγαίνουν στον διακομιστή σας και θα βελτιώσει την απόδοση. Όταν χρειάζεστε τη λειτουργία "ζωντανή" σε μια είσοδο, μπορείτε να χρησιμοποιήσετε το wire: model.live για να ενεργοποιήσετε αυτήν τη λειτουργία.
Αυτή είναι μια από τις ελάχιστες αλλαγές από το v2 στο v3.
5. Τα αιτήματα συγκεντρώνονται
Στο Livewire v2, εάν έχετε πολλά εξαρτήματα που χρησιμοποιούν καλώδιο: poll ή αποστολή και ακρόαση γεγονότων, κάθε ένα από αυτά τα στοιχεία θα στέλνει ξεχωριστά αιτήματα στον διακομιστή για κάθε δημοσκόπηση ή εκδήλωση. Στο Livewire v3, υπάρχει μια έξυπνη ομαδοποίηση αιτημάτων, έτσι ώστε να καλυφθούν: δημοσκοπήσεις, εκδηλώσεις, ακροατές και Οι κλήσεις μεθόδων μπορούν να ομαδοποιηθούν σε ένα αίτημα όταν είναι δυνατόν, αποθηκεύοντας ακόμη περισσότερα αιτήματα και βελτιώνοντας εκτέλεση.
6. Αντιδραστικές ιδιότητες
Στο Livewire v3, όταν περάστε ένα κομμάτι δεδομένων σε ένα θυγατρικό στοιχείο , προσθέστε ένα/\*_ @prop _/ σχόλιο πάνω από την ιδιότητα στο παιδί, στη συνέχεια ενημερώστε το στο γονικό στοιχείο, θα ενημερωθεί στο θυγατρικό στοιχείο.
<?php
χώρο ονομάτωνApp\Http\Livewire;
τάξηTodosCountεκτείνεται \Livewire\Συστατικό{
/** @στήριγμα */
δημόσιο $todos;
δημόσιολειτουργίακαθιστώ(){
ΕΠΙΣΤΡΟΦΗ <<<'HTML'
<div>
Todos: {{ count($todos) }}
</div>
HTML;
}
}7. Αποκτήστε πρόσβαση στα δεδομένα και τις μεθόδους του γονικού στοιχείου χρησιμοποιώντας το $parent
Στο Livewire v3, θα υπάρχει ένας νέος τρόπος πρόσβασης στα δεδομένα και τις μεθόδους ενός γονικού στοιχείου. Υπάρχει μια νέα ιδιότητα $parent στην οποία μπορείτε να αποκτήσετε πρόσβαση για να καλέσετε μεθόδους στο γονικό.
<?php
χώρο ονομάτωνApp\Http\Livewire;
τάξηTodoInputεκτείνεται \Livewire\Συστατικό{
/** @modelable */
δημόσιο $value = '';
δημόσιολειτουργίακαθιστώ(){
ΕΠΙΣΤΡΟΦΗ <<<'HTML'
<div>
<καλώδιο εισόδου: μοντέλο="αξία" καλώδιο: keydown.enter="$parent.add()">
</div>
HTML;
}
}8. Teleport
Το Livewire v3 θα περιλαμβάνει επίσης μια νέα οδηγία @teleport Blade που θα σας επιτρέψει να "τηλεμεταφέρετε" ένα κομμάτι σήμανσης και να το αποδώσετε ένα άλλο μέρος του DOM. Αυτό μερικές φορές μπορεί να βοηθήσει στην αποφυγή προβλημάτων με τον δείκτη z με modals και slideouts.
<div>
<σύρμα κουμπιού: κλικ="showModal">Εμφάνιση τροπικού</button>
@teleport('#footer&απο;)
<x-modal wire: model="showModal">
<!--... -->
</x-modal>
@endteleport
</div>9. Lazy Components
Στο Livewire v3, απλώς προσθέστε ένα χαρακτηριστικό lazy κατά την απόδοση ενός στοιχείου και δεν θα αποδοθεί αρχικά. Όταν εισέλθει στη θύρα προβολής, το Livewire θα ενεργοποιήσει ένα αίτημα για την απόδοσή του. Θα μπορείτε επίσης να προσθέσετε περιεχόμενο κράτησης θέσης εφαρμόζοντας τη μέθοδο κράτησης θέσης στο στοιχείο σας.
<div>
<σύρμα κουμπιού: κλικ="showModal">Εμφάνιση τροπικού</button>
@teleport('#footer&απο;)
<x-modal wire: model="showModal">
<livewire: example-component lazy />
</x-modal>
@endteleport
</div>
<?php
χώρο ονομάτωνApp\Http\Livewire;
ΤάξηExampleComponentεκτείνεται \Livewire\Συστατικό{
δημόσιοστατικόςλειτουργίακράτησης θέσης(){
ΕΠΙΣΤΡΟΦΗ <<<'HTML'
<x-spinner />
>>>
}
δημόσιο λειτουργία καθιστώ()/** [tl! κατάρρευση: 7] */{
ΕΠΙΣΤΡΟΦΗ <<<'HTML'
<div>
Todos: {{count($todos) }}
</div>
HTML;
}
}
?>Απλότητα και δύναμη στο Livewire V3
Ο συνδυασμός απλότητας και δύναμης είναι αυτό που κάνει Laravel Livewire τόσο φοβερό και γιατί χρησιμοποιείται από τόσους πολλούς προγραμματιστές. Είναι ιδιαίτερα μια καλή εναλλακτική στον συνδυασμό Laravel + Inertia + Vue. Συγκεκριμένα, το Laravel είναι επίσης ομαδοποιημένο με άλλα πλαίσια που είναι ισχυρά και μπορούν να συνεργαστούν.
