Τι νέο υπάρχει στο Livewire v3 Laravel Framework;

Τι νέο υπάρχει στο Livewire v3 Laravel Framework;

Το Laravel Livewire είναι ένα εξαιρετικό εργαλείο για την επίτευξη δυναμικής συμπεριφοράς σε μια ιστοσελίδα, χωρίς απευθείας εγγραφή κώδικα JavaScript. Κάνει τη δημιουργία δυναμικών διεπαφών απλή, χωρίς να αφήνει την άνεση της Laravel. Πρόσφατα, ο πυρήνας Livewire έχει ξαναγραφεί πλήρως.





Το νέο Livewire v3 έχει καλύτερες διαφορές, οι λειτουργίες μπορούν να δημιουργηθούν πιο γρήγορα και υπάρχει λιγότερη διπλή αναπαραγωγή μεταξύ του Livewire και του Alpine επειδή βασίζεται περισσότερο στο Alpine και χρησιμοποιεί το Morph, το History και άλλα πρόσθετα. Αρκετά από τα νέα χαρακτηριστικά κατέστησαν επίσης δυνατά με την αναδιάρθρωση της βάσης κωδικών και δίνοντας μεγαλύτερη έμφαση στο Alpine.





πώς να κάνετε screenshot χωρίς να το γνωρίζουν
ΚΑΤΑΣΚΕΥΗ ΒΙΝΤΕΟ ΤΗΣ ΗΜΕΡΑΣ

1. Εισάγετε αυτόματα σενάρια, στυλ και 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>

2. Λειτουργίες JavaScript σε τάξεις PHP

Το Livewire v3 θα υποστηρίζει τη σύνταξη συναρτήσεων JavaScript απευθείας στα στοιχεία του Livewire του backend. Προσθέστε μια συνάρτηση στο στοιχείο σας, προσθέστε ένα σχόλιο /\*_ @js _/ πάνω από τη συνάρτηση και, στη συνέχεια, επιστρέψτε κάποιο κώδικα JavaScript χρησιμοποιώντας τη σύνταξη HEREDOC της PHP και καλέστε τον από το περιβάλλον σας. Ο κώδικας JavaScript θα εκτελεστεί χωρίς αποστολή αιτημάτων στο backend σας.

<?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 θα υποστηρίζει κλειδωμένες ιδιότητες - ιδιότητες που δεν μπορούν να ενημερωθούν από το frontend. Προσθέστε ένα σχόλιο /\*\* @locked / πάνω από μια ιδιότητα στο στοιχείο σας και το Livewire θα δημιουργήσει μια εξαίρεση εάν κάποιος επιχειρήσει να ενημερώσει αυτήν την ιδιότητα από το frontend.



συγχρονισμός σελιδοδεικτών μεταξύ chrome και firefox
<?php 
namespace App\Http\Livewire;
class Todos extends \Livewire\Component
{
/** @locked */
public $todos = [];
}
?>

4. Wire:model Is Deferred by Default

Καθώς το Livewire και η χρήση του έχουν εξελιχθεί, συνειδητοποιήσαμε ότι η συμπεριφορά 'αναβολής' είναι πιο λογική για το 95% των φορμών, επομένως στο v3 η 'αναβαλλόμενη' λειτουργικότητα θα είναι η προεπιλογή. Αυτό θα εξοικονομήσει περιττά αιτήματα που πηγαίνουν στον διακομιστή σας και θα βελτιώσει την απόδοση. Όταν χρειάζεστε τη λειτουργία 'ζωντανή' σε μια είσοδο, μπορείτε να χρησιμοποιήσετε το wire:model.live για να ενεργοποιήσετε αυτήν τη λειτουργία.