如何開發一款基於 Vite+Vue3 的在線表格系統（上）
今天，葡萄帶你了解如何基於Vite+Vue3實現一套純前端在線表格系統。
在正式開始項目介紹之前，首先咱們首先來介紹一下Vite和Vue3。
Vue3
Vue是什麼？大多前端開發者對這個詞已毫不陌生了。三大框架孰優孰劣，眾多開發者各抒己見，其中Vue以其「最簡單、最易上手「的名號迅速積累了一大批粉絲，被廣泛學習應用。
同Angular、React框架一樣，Vue也是MVVM類型的框架，即數據驅動視圖，在開發時我們只需要關注數據的變化即可。不同的是，Vue是一個更輕量級的框架，被設計為自底向上逐層應用，其核心庫只聚焦於視圖層， 通過儘可能簡單的API實現了響應式數據綁定以及組合的視圖組件。
Vue已經如此優秀，為什麼還需要Vue3呢？
這就要提到它的不足之處了，在之前的Vue2中，使用的是選項型API（Options API），將程式碼分割為不同的屬性：data、computed、methods 等，這些方法屬性各司其職。
選項型API固然好學易上手，與此同時也帶來了一個關鍵問題：程式碼混亂，可讀性差。
舉個例子，現在我們想做一個列表視圖功能，那麼需要在data中寫上相關的變數，在methods中將相關的邏輯判斷和後端交互也加上。這個時候，新需求來了：添加上搜索和篩選功能。沒有問題，繼續將新的變數堆積在data中，將新的方法整理在methods中……寫程式碼一時爽，後期維護的程式設計師傻眼了，這一堆堆的方法，到底在講個啥。
既然Vue2這個弊端已經暴露出來了，自然要在它的升級版嘗試解決了。所以Vue3推出了組合式API（Composition API），正是為了解決原本Vue2項目中程式碼邏輯分散、不易理解和維護的問題。它使用方法（function）進行程式碼分割，使程式碼更為簡潔易讀。
既然做了，其他方面也不能落下啊！在性能上面，Vue3也對diff演算法進行了優化：
在Vue2中，每當數據發生變化，就會生成一個新的DOM樹，並新DOM樹與舊的DOM樹進行對比，來判斷節點異同，並進行更新。但完整遍歷過程需要將兩棵樹所有節點進行比較，但實際情況中並不是所有節點內容都會變化，這就造成了性能的浪費。
Vue3新增了靜態標記，僅對標記了的節點進行對比並進一步更新，無需再遍歷整個節點，實現了性能提升。
對比Vue2，官方文檔對Vue性能有具體的數據介紹：SSR速度提高了23倍；Update性能提高1.32倍。（程式設計師看到後更有信心學習了！）
除此之外，Vue項目中也有眾多API和模組，但在實際項目中我們並不會用到所有的內容，Vue3對此推出按需打包模組，可以大幅壓縮打包後的內容體積。
根據官網對比示例，Vue2中如果僅寫了Hello Word，未用到任何模組API，打包後大小約為32KB；而Vue3同理，打包後大小約為13.5KB，可以明顯看出升級後的Vue3相較於Vue2打包體積大幅減小。
與Vue2相比，Vue3中生命周期函數也發生了變更，總結如下：
有需要的同學可以截圖保存，以備不時之需。
說完了Vue3，接下來我們來看看Vite又有什麼亮眼之處。
Vite
在Vue3正式發布之前，尤雨溪就提到做了一個新的前端構建工具-Vite。其本人更是對Vite青睞有加，引得Webpack開發者直喊大哥。
Vite究竟有什麼樣的神奇作用呢？它做到了本地快速開發啟動：
- 不需要等待打包操作，快速冷啟動
- 即時的模組熱更新
- 無需等待整個項目編譯完成，做到真正的按需編譯
在使用Webpack時，會經歷分析依賴 => 編譯打包 => 交給開發伺服器渲染 整個過程。也就是說，需要先打包，之後將打包結果提供給伺服器進行載入。而隨著模組的不斷增多，打包的體積會越來越大，造成熱更新速度明顯拖慢。
而Vite直接略過了打包步驟，直接啟動開發伺服器，在請求具體的模組時再對該模組進行實時編譯，大大提高了啟動速度。
到這裡我們已經詳細為大家介紹了Vue3升級的亮眼功能和Vite的優勢，在下部分中我們會以項目實例出發，為大家介紹如何如何開發一款基於 Vite+Vue3 的在線表格系統。
感興趣的小夥伴們不要錯過~
