何謂前端框架

在我以前學的時候，前端框架通常指的是CSS框架，方便開發的UI樣式庫、或是統一的風格。例如：w3.css、Bootstrap、Tailwind、Foundation、Materialize、SemanticUI、Bulma、Skeleton、DaisyUI...之類的。

當然現在有許多框架都屬於前端的範圍，像是上一篇文章提到的前端渲染類框架是連內容都動態渲染，這顯然與我對網頁的認知不太相同 為啥就不能在後端做成靜態就好，導致前端也要套用MVC模型 直接變成一坨義大利麵。

"現代"的前端框架

現代的方法就是把原本分工問題與可維護性考慮進來，不再只是單純方便開發，而是多人協作與快速開發都包進來，但我還是建議新手入門先不要使用這種方法避免不必要的麻煩，如果只是要做簡易的單頁靜態網頁就不要為了簡易的開發而使用React、Vue..這類框架，導致專案複雜度提升。

讓我們來看看這些框架做了啥

1. React

React 是由 Facebook 開發的 JavaScript 框架，主要用於設計視圖層（view layer）。開發者使用可重用的模組來構建大型應用程序的前端。React 使用 JSX（JavaScript 和 XML 的結合），使得 HTML 與 JavaScript 可以更加緊密。

React 基於模組化架構，每個模組管理自己的狀態和生命週期。此外，React 引入了一種稱為 “虛擬DOM” 的概念。當模組的狀態改變時，React 會在虛擬DOM上進行計算後，然後再反應到真實的 DOM 產生變化。

2. Vue

Vue.js 是一個漸進式 JavaScript 框架。Vue 同樣也用於建立使用者界面，但它更容易結合到既有專案中。Vue 可以透過（如 v-bind, v-model 等）和模組系統進行資料綁定。

Vue 採用 MVVM（Model-View-ViewModel）架構。資料模型（Model）和視圖（View）之間透過 ViewModel 進行連接。ViewModel 透過 Vue 實例（Instance）使得資料和視圖之間的自動同步。在 Vue 中，資料和 DOM 是雙向綁定的，因此當資料改變時，DOM 也會隨之自動更新。

3. Angular

Angular 是由 Google 維護的開源前端框架，它是一個完整的解決方案，可用於開發單頁式應用程式（SPA）。Angular 不僅包含視圖層，還提供了豐富的功能，例如依賴注入（DI）、路由、表單管理、伺服器通訊等。

Angular 採用了 MVVM 和 MVC（Model-View-Controller）架構的混合。開發者可以將應用分割成獨立的 MVC 模組，這些模組負責畫面的呈現（View）、資料管理（Model）和邏輯控制（Controller）。Angular的另一個特色是其改進的依賴注入（DI）系統，當構建大型應用程式時更加模組化也易於維護。

其中 Angular 是目前業界比較多在使用的框架，它的特性更適合用於開發全方位的應用程式，這對一些追求穩定的企業特別重要。
但是 Angular 也是這三個主流框架裡面學習成本最高的，因此各位要多花時間（大誤）