【Laravel入門】Laravel如何實現MVVM架構的應用? Vue or LiveWire

我原先的規劃是在過年的時候學習線上課程的經營，沒想到除夕前一天拿到Kuro大出的Vue.js新書，就被 MVVM 架構給吸進去了，每天痛苦並快樂著度過(原因等會說明)，時間一下跑到了年初四，正想著Vue.js雖然強大，但與我目前的開發架構跨度也很大，要補足的前端知識很多，風險較高時，我又想到了之前分享過的Livewire，就又被Livewire吸進去了，不覺間時間就到了現在

我終於把 Livewire 也納入我的開發&教學架構，作為 Vue.js 的短期替代方案

或許有些人不理解甚麼是MVVM? Vue.js以及Livewire又有甚麼不同?

別急，這篇文章就是要和你聊聊這些知識點!

關於MVVM

MVVM的視圖模型是一個值轉換器，這意味著視圖模型負責從模型中暴露資料物件，以便輕鬆管理和呈現物件。在這方面，視圖模型比視圖做得更多，並且處理大部分視圖的顯示邏輯。視圖模型可以實現中介者模式，組織對視圖所支援的用例集的後端邏輯的存取

我知道可能很多人看不懂，包括我，哈哈。我試著來說明一下，你一定聽過MVC，裏頭包含了Model . View 和Controller。而MVVM的前兩個字母意思相同，後面的VM指的是View Model ，你可以理解為它是負責把View和Model綁定在一起的引擎。在這個架構底下呢，Model和View成了具有心電感應的雙胞胎，當使用者輸入了某個文字輸入項之後，Model物件的屬性就跟著產生變化，中間不需要Controller介入

那麼近來把MVVM架構實作的精采，標榜簡單易學，且鋒頭畢露的就是Vue.js。理論上來說熟悉Laravel開發的我們要接著入手Vue.js應該是分分鐘的是事情，畢竟Laravel預設支持的前端框架就是Vue呀。但事實並非如此，我在環境建置上吃了不少的苦頭，最後是用輕前端的方式(直接導入外部script，免除自行編譯的工作)才能開始使用的。為什麼會這樣呢? 我覺得是有兩個問題導致

第一點，前端的開發知識和後端的開發知識有很大的差異，後端我們熟的是PHP，前端你必須熟的則是JS，尤其是ES 6，另外關於node manager也是常在開發後端的我們所較少碰到的，這是個很大的雷，會卡的後端新手痛苦萬分

第二點，Vue.js也剛經歷一個新的改版，從Vue 2 升級到 Vue 3。你正在開發的Laravel 8.x專案預設支持的正是 Vue 2 。不過根據我看Kuro大的書，他建議如果你是Vue新手，可以直接學習 Vue 3 ，這導致你得要自己搞定Laravel支持的Vue版本升級的動作。當然網路上也找的到教學，但我沒有找到一個能帶給我幸運的，或許你可以?

第二點的問題只是暫時的，我相信今年下半年的 Laravel 9 將會直接支持 Vue 3，就不需要自己去費心升級了。至於第一點，如果你所在的開發團隊夠完整，有前端工程師和你配合，有人能幫你，問題就不大。但假如你和我一樣，目前處於一人全端開發的話，就有點痛苦了

還好，我們有 Livewire !

你可以把 Livewire 理解成PHP版本的MVVM技術，你所熟悉的Blade寫法還是這麼寫，只需要學一下怎麼創建 Livewire 組件，就能夠在專案裏頭實現MVVM。甚至 Livewire 的官方教學影片就直接把 Livewire 和 Vue.js 作對比，顯見 Livewire 的出現就是取自於 Vue.js 的概念。那樣的話， Livewire 和 Vue.js 該如何選擇呢?

當你在網路上搜尋，肯定可以找到一堆的比較，總地說就是各有優勢，就看你的需求是甚麼? 聽起來像廢話，我就多說幾句好了

Livewire 的語法就是 HTML 加 PHP ，所以如果你會寫 Laravel ，學習 Livewire 將不會有任何門檻。另外，Livewire 本來就誕生於 Laravel 生態圈，因此技術上會比Vue更貼合於 Laravel。建置上也很簡單，就只要安裝一個套件，在視圖上導入素材，就可以開始把玩 Livewire 了。但也說說他相對於Vue.js的弱勢。它目前還沒有自己的生態圈，因此功能上還比不過 Vue.js 那麼多元

結論時間

寫了這麼多，該來到結論時間了。我覺得 Livewire 是後端工程師專屬的MVVM方案，有了它建立SPA應用一點也不困難，別再說我們只會寫CRUD了，寫炫酷前端我們也會唷!等到Laravel9面世，再來玩Vue 3也不遲