vue 進階學習（一）： vue 框架說明和與其他框架的對比

• 2021 年 4 月 29 日
• 筆記
• VUE

vue 框架說明和與其他框架的對比

一、說明

是一套用於構建用戶介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注視圖層，不僅易於上手，還便於與第三方庫或既有項目整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。(來自官網 官網鏈接)

1. 說明分析

1. 只關注視圖層（html、css、js），將其中的 View 的狀態和行為抽象化，讓我們將視圖 UI 和業務邏輯分開。Vue.js 就是 MVVM 中的 ViewModel 層的實現者；核心就是實現 DOM 監聽與數據綁定
2. 便於與第三方庫或既有項目整合，vue 生態比較完善，其中有路由 ui 框架 element-ui、管理器 router、網路通訊 axios、狀態管理 vuex 等，這些後期會講到
3. vue3.0 版本是基於 typeScript 編寫的，可以更好的支援 TypeScripy

2. 特點

1. 輕量級，體積小，
2. 容易上手，學習曲線平穩，文檔齊全
3. 結合了 Angular 的模組化和 React 的虛擬 DOM 的優點，並擁有自己獨特的功能，如計算屬性
4. 開源，社區活躍度高

MVVM 模式說明:

1. Model：模型層，表示 javascript 對象
2. View：視圖層，表示 DOM，HTML 的操作元素
3. ViewModel：連接視圖和數據的中間件，雙向綁定，

TypeScript:

1. 微軟的標準，通過 webpack 打包成 javascript；vue3.0 以上版本支援 typeScript

二、對比其他框架

1. javascript，原生 js，是基於標準規範 ECMAScript （ES）開發；

   • ES6：目前主流版本，設計思想是盡量模組化，使編譯時就能確定模組的依賴關係，以及輸出和輸入的變數 ；可以通過 webpack 打包成為 ES5
   • ES5：全瀏覽器都支援

2. jQuery 框架：主要簡化 DOM 操作；

3. Angular js：Google 收購的前端框架，java 開發者開發，將 java 的 mvc 模型搬到了前端，增加了模組化開發理念，與微軟合作，採用 TypeScript 開發

4. React：Facebook 出品，虛擬 DOM，基於記憶體的，運行時性能和 vue 差不多；

5. Vue：一款漸進式 javaScript 框架，用於構建用戶介面（視圖層），集成 Angular 和 REact 優點（模組化 mvvm-非同步通訊 和虛擬 DOM 技術），Vue 邊界明確，只是為了處理 DOM，不具備通訊能力，因此需要額外的通訊框架和伺服器交互，可以使用 Axios 或者 jQuery 的 ajax

6. 常用的 UI 框架：bootstrap、EasyUI、Element-UI、e-view、LayUI（類 UI），配合vue的時Element-UI