Livewire 是 Laravel 的全端框架，能建立像 Vue 一樣的動態頁面的同時又能保有 Laravel 原有的特性。除此之外在 SEO 方面仍跟原本 Laravel 的 blade 一樣可以渲染出畫面上的資料，不用擔心是否要再部署 SSR 的問題。

Livewire 的原理

每個在頁面上的互動都會透過 AJAX 於背景溝通，並即時響應在畫面上，就跟 Vue 一樣根據資料變化會自動地去修改 DOM。

官方文件

Livewire 帶來的解決方案

Laravel 方面

原先要回傳表單內容，並即時更新頁面上的資料：

1. 點擊送出按鈕，onClick() 事件觸發 JS 的 Function
2. Function 內透過 AJAX 將資料打 API 回後端
3. 藉由 Router 將資料送至特定的 Controller Function
4. Controller 處理完成，回傳一個 HTTP status 200
5. AJAX 接收到 200 後透過 jQuery 去新增/修改頁面上的元素

想要在 PHP 的環境搞頁面動態更新真的非常麻煩。而且難維護的還不是只有 API，而是 jQuery 的部分，因為這邊要用程式去產生畫面 ，就會有一堆 PHP 混雜 JavaScript 然後又帶 HTML 的怪東西。

Vue 方面

一樣是回傳表單內容，並即時更新頁面上的資料：

1. 點擊送出按鈕，@click 事件觸發 methods 的 Function
2. 直接或透過 Vuex，用 axios 等將資料打至 API
3. API 回傳資料，並修改 Vuex 或直接修改頁面上的 data

雖然在頁面上資料的處理就不再是自己手動用 jQuery 去修改 DOM，而是由 Vue 去動態渲染頁面，比起上述 Laravel 的傳統方法是輕鬆了許多。但 Vue 的動態渲染特性也導致 SEO 上的問題，爬蟲會爬到渲染前的頁面也就是沒有內容的 HTML，若要讓 SEO 正常則需要再透過 SSR (Server Side Render) 這道手續。

Livewire 解決了以上的問題

Livewire 能讓 Laravel 的前端看起來像是 SPA（Single-Page Application） 一樣。就和 Vue 一樣由資料去控制畫面，除了不用再寫很髒的 code 去改 DOM 外，在整體的開發效率上也是更上一層樓，尤其若是整個專案都是全端自己來的話。以往為了達成 SPA，不是使用 laravel-vue 就是前後端分離來寫，但這就需要額外寫 API 來處理資料的傳遞，在接收跟傳送的部分一樣的 code 就要用不同語言重寫一次，此外還會有 token、CORS 等等問題要處理。

在 Livewire 中，則可以省略上述大部分流程，一樣是回傳表單內容，並即時更新頁面上的資料：

1. 點擊送出按鈕，wire:click 事件觸發後端的 Function
2. 直接在後端 Function 去改變資料的值，前端頁面直接響應

Livewire 與 Vue 的相似之處

這兩者之間非常的類似，像是 計算屬性(computed) 及 資料綁定(bind-model) 等等，在 Livewire 都有支援，而且 Livewire 的生命週期還比 Vue 來得多一些些，這會在日後的章節中提到。

下面就讓我們來看看 Livewire 跟 Vue.js 相似的 Code。

// Vue.js
//
<label>請輸入年齡</label>
<input type="text" v-model="age" ></input>
<button @click="updateAge">送出</button> 

 // Laravel Livewire
 //
 <label>請輸入年齡</label>
 <input type="text" wire:model="age" ></input>
 <button wire:click="updateAge">送出</button> 

若再搭配 AlpineJS 基本上就跟 Vue.js 一樣了呢

 // Laravel Livewire via AlpineJS
 //
 <label>請輸入年齡</label>
 <input type="text" x-model="$wire.age" ></input>
 <button @click="$wire.updateAge()">送出</button>