# 從共用Vite到React、Vue前端框架的比較與共通性

###### tags: `開發工具` `前端框架` `Vue` `React` `前端`

- 有了vite，輕量級前端框架連編譯工具也能共用了
- React(18)和Vue(3)儘管設計理念有差異，也能對照出相似之處

## Vite是什麼樣的工具？
- [官網簡介](https://cn.vitejs.dev/guide/)
- 功能類似[Vue](https://zh-hans.reactjs.org/docs/getting-started.html)生態的[vue-cli](https://cli.vuejs.org/zh/guide/creating-a-project.html)、[React](https://zh-hans.reactjs.org/docs/getting-started.html)生態的[create-react-app](https://github.com/facebook/create-react-app)，執行開發用伺服器(dev server)與打包編譯檔案(build/webpack)
- 但是**執行速度快超多！**
- [如名稱辭源強調的](https://www.larousse.fr/dictionnaires/francais-chinois/vite/40868)，啟動與修改專案的等待時間大幅縮短，短到幾乎不用等
- [技術說明：用 ESM + ES6 減免 build 的時間，且放棄IE支援](https://blog.techbridge.cc/2020/08/07/vite-and-esmodules-snowpack/)([簡易版介紹](https://ithelp.ithome.com.tw/articles/10266460https://ithelp.ithome.com.tw/articles/10266460))
- "V"開頭的名稱看起來是Vue生態系的一部分(也直接由Vue開發者創造)，但其實遠遠不只如此...
- 更可說是新世代的前端框架共通工具
- 因為[連與Vue直接競爭的React、Svelte也可以使用](https://cn.vitejs.dev/guide/#trying-vite-online)(撈過界的概念？)
- 建立專案類型選擇的引導指令：`npm create vite@latest`

## Vite的實作應用參考
- Vue
- [2021年鐵人賽的系列文章：以Vite + Vue 3 Composition API開發](https://ithelp.ithome.com.tw/users/20139636/ironman/3890)
- React
- [從 Create-React-App 到 Vite 的修改](https://hackmd.io/@pSnFKx_GTlmTWXn4A8lpKw/HkAUZzSvY)

## 前端框架Vue和React的異同之處！
- 網路文章參考：
- [語法、特性平行對照範例](https://zhuanlan.zhihu.com/p/137046152)
- [一些運作概念的比較](https://hhow09.github.io/react/react-vs-vue/)
- 簡易實作：用Vite個別產生Vue和React的專案來對照檔案目錄
- 由於頁面內容架構大致一樣，可以直接比對檔案結構與語法
- 特性差異簡單對照：
- Vue：
- 詳細語法除了官網，[也可參考此書](https://book.vue.tw/menu.html)
1. 對應"View"的讀音與意涵：***主要處裡「視圖」(瀏覽器能看到的部分)***
2. 結構相對明確，較適合小型專案與[漸進式框架](https://ithelp.ithome.com.tw/articles/10216661)使用
3. 如**HTML結構模板**(template)的.vue檔案
4. 提供模板格式額外的**v-指令**
5. 元件(Component)語法
- **舊版(物件導向)：Options API**
- **新版(函式導向)：Composition API**
6. 主要路由套件方案：Vue Router
7. 主要狀態管理套件：Vuex
- React：
- 詳細語法除了官網，[也可參考之前的系列筆記](https://hackmd.io/@BOBYZH/H1JqsfYg9)
1. 直接對應單字詞義本身：***因應資料變化更新畫面的「反應」***
2. 結構相對自由，較適合中大型專案與跨裝置開發(React Native)
3. **以JavaScript為基礎擴充語法**的.**JSX**(或.js)檔案
4. 強調使用**原生JS語法**操作(含JSX改寫)
5. 元件(Component)語法
- **舊版(物件導向)：class components**
- **新版(函式導向)：function components (hooks)**
6. 主要路由套件方案：React-router(-dom)
7. 主要狀態管理套件：Redux
- **共通之處：元件模組化、虛擬DOM掛載、狀態管理、生命週期、props...**
- 簡言之，大致了解Vue和React後(如翻完說明文件或專書)，可以發現二者算是在共通的現代前端架構下，提供不同但能對照的方案
- 因此，學習一種框架後在學另一種會更容易(已經先有概念，再找對應與差異的部分)