Livewire v3 Laravel フレームワークの新機能?

Laravel Livewire は、JavaScript コードを直接記述せずに Web ページで動的な動作を実現する優れたツールです。これにより、Laravel の快適さを損なうことなく、動的インターフェースを簡単に構築できます。最近、Livewire コアが完全に書き直されました。

新しい Livewire v3 は差分が改善され、機能の構築が速くなり、Alpine への依存度が高くなり、Morph、History、およびその他のプラグインを使用するため、Livewire と Alpine の重複が少なくなります。新しい機能のいくつかは、コードベースを再構築し、Alpine に重点を置くことによっても可能になりました。

クレイグズリスト詐欺師は私のメールアドレスを持っています

今日のメイク動画

1. Livewire スクリプト、スタイル、および Alpine を自動的に挿入する

Composer が 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. PHP クラスの JavaScript 関数

Livewire v3 は、バックエンドの Livewire コンポーネントでの JavaScript 関数の直接記述をサポートします。コンポーネントに関数を追加し、関数の上に /\*_ @js _/ コメントを追加してから、PHP の HEREDOC 構文を使用して JavaScript コードを返し、フロントエンドから呼び出します。 JavaScript コードは、バックエンドにリクエストを送信せずに実行されます。

WiiU用のSDカードをフォーマットする方法

<?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 / コメントを追加すると、誰かがフロントエンドからそのプロパティを更新しようとすると、Livewire は例外をスローします。

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

4. Wire:model はデフォルトで延期される

Livewire とその使用法が進化するにつれて、フォームの 95% で「遅延」動作がより適切であることがわかったため、v3 では「遅延」機能がデフォルトになります。これにより、サーバーへの不要なリクエストが節約され、パフォーマンスが向上します。入力で「ライブ」機能が必要な場合は、wire:model.live を使用してその機能を有効にすることができます。