内容概要
•背景•vue3 項目開發 get 到的知識•讓我驚訝的 vite•項目中遇到的困難•總結•項目技術棧•資料推薦
背景
有一個新項目啟動，移動端項目相容安卓 6+，沒有曆史包袱，技術選型可以自由發揮。考慮到項目周期/團隊技術/學習成本，最後選取還算比較新的 vue3。
不過等我的項目上線到寫完這篇，有些東西已經不是最新的啦，Vue 3.1.0 的 beta 版釋出了不得不感慨前端技術日新月異，變化的速度之快，我學不動了。
vue3 項目開發 get 到的知識
剛開始用的時候，可懷念 vue2 了，我始終 get 不到 vue3 的精華，也了解不了網上說的組合式API 有多好。vue2 我是輕車熟路，vue3 我是面向文檔開發。選擇了用 vue3，就要去 get 他的精華，用着用着我發現真香，vue3 和 vite2 結合的項目驚訝到我了。
組合式 API 解決了什麼問題？
在開始寫項目的時候，我一直沒有 get 到組合 API 的有優點，還沒有了全局的 this，我就有點不開心了，但是随着項目越來越複雜，頁面越來越大的時候我就發現組合 API 真香。特别喜歡。
vue2 資料定義在 data，方法在 method，中間可能還有 watch，computed 等等别的東西，資料定義和方法處理邏輯之間差了十萬八千裡，當邏輯複雜達到一定長度的時候，追蹤一個變量的變化是一件非常頭痛的事情，滑鼠需要來復原動。
有了組合 API，這個問題就解決了。所有相關的都可以寫在一塊。真好，它帶來了一種全新的開發方式。如果你是 React 開發使用者或者熟悉 React，那麼 vue3 上手很快，你甚至都可以在頁面中使用 hooks 的方式開發。由于這個項目使用場景比較小，是以在項目中并沒有進行采用 hooks 的方式，後續有需要的時候可以考慮使用。了解更多關于組合式 API 請參考文檔什麼是組合式 API？[1]
API的變化
由于在執行 setup 時，元件執行個體尚未被建立，是以在 setup 選項中沒有 this。這意味着，除了 props 之外，你将無法通路元件中聲明的任何屬性——本地狀态、計算屬性或方法。setup 選項應該是一個接受 props 和 context 的函數。
因為 props 是響應式的，你不能使用 ES6 解構，因為它會消除 prop 的響應性。如果需要解構需要用 toRefs。
執行 setup 時，元件執行個體尚未被建立。是以，你隻能通路以下 property：
props
attrs
slots
emit 複制
換句話說，你将無法通路以下元件選項：
data
computed
methods 複制
整個項目下來與 vue2 隻有文法的差别，思想啥的變化不大，不難。面向文檔開發基本可以滿足你的需求。
一個元件的思考
如何寫好一個元件，元件的規劃/使用/維護，始終是一個值得深入思考的問題。Composition API 帶了了一種全新的開發方式，甚至可以使用 hooks 的方式開發。每個子產品各司其職，各自有自己的内部資料，公共的使用函數或者 hooks 抽象出來，整體上非常清爽，工程化越來越強，在項目中開發是否全部要使用 .vue 建立元件呢？
以前我覺得既然我選了 vue，就要用 .vue 的形式，但是在這次的項目開發過程中，我看到了我的小夥伴使用了原生 js 建立元件，我眼前一亮，在某些情況下用原生的 js 建立元件是一個非常不錯的選擇，那一刻我明白了，适合自己實際需求的才是最好的，混合式元件開發可以取長補短。
比如接口請求過程中，使用者突然斷網了，前端提示使用者斷網的頁面，這代碼就很簡潔了。
還有用 jsx 方式建立的元件，可定制化。
适當的邏輯點分離: 埋點邏輯和業務邏輯分離更加有益于項目後期的維護（自定義指令實作聲明式埋點）。
路由邏輯的處理
視野中出現了焦點，也就出現了盲點。路由邏輯處理這塊，我就坑到自己了，我焦點都在組合式API，在組合式 API 文檔我找不到進入路由時候的生命周期函數。結果就導緻我部分頁面邏輯寫在了 router.js 裡面。
// 路由檔案
{
path: '/index',
component: HOME,
beforeEnter: (to, from) => {
if (from.path === "/read") {
to.meta = {
updateHistory: 'read',
}
}
}
};
// 頁面檔案
watch(() => route.meta,(val) => {
if (val.updateHistory) {
getHistoryHandler()
}
}); 複制
這是一個非常非常不好的寫法，頁面邏輯和路由邏輯耦合在一起，後期維護帶來了很大的問題，後來同僚指點，糾正了這個問題。我竟然忽略了它原來的文法，去執着與他的新文法。
所有頁面需要統一的動态的一級路由字首，即路由的一級域名不是由前端控制的，但是在實際開發中，前端路由規則是要關注一級路由的。按照一貫的邏輯是所有的路由配置動态路由即
path: '/:flag/index', path: '/:flag/listen'....
隻要是有路由就需要在前面加上
/:flag
,某些情況下還需要處理在業務邏輯裡面單獨處理，這個邏輯混在比較多，不利于後期的維護。
想偷懶，思考有沒有簡單的解決方法，同僚一番研究花了不少時間，不斷試錯不斷研究，終于發現可在路由上面做文章，一句代碼解決了大量重複的勞力。簡直開心的不能再開心，分分鐘搞定了createWebHistory 支援設定base檔案目錄[2]
createWebHistory(location.pathname.split('/')[1])
原來打包的時候還能動态的指定路由方式，真棒。
讓我驚訝的 vite
開發體驗對比
項目啟動&&項目打包&&項目體積
ps：由于 vue-cli 和 vite 的環境變量讀取方式和某一些 css 的引入方式不一樣，在 vue-cli 裡面我就注釋了相關的代碼。確定項目能夠跑去來。除此之外别的幾乎是一模一樣
通過資料對比可見：
vite 建立的項目，在項目啟動和打包後的體積方面都遠遠勝過 vue-cli 建立的項目。
vue-cli 建立的項目，打包速度優于vite一點，但是在我們開發過程中，經常打包頻率并不高，而且慢的也沒有很誇張離譜。
就我個人而言，我更加傾向于 vite 去搭建項目。
vite 是如何吸引我的？
1.無邊界 => 純 html 項目，react 項目都可以，項目中可以使用較新的文法，相容性交給工具。
1.緊跟時代的文法潮流支援
module 形式引入 js 腳本
在 js 裡面，可以通過這種形式引入 css
支援 css 子產品化寫法 純 html 項目也可以做到實時更新
讓我們可以隻需要關注業務開發，而無需去關注文法層面的相容性以及打包配置，我喜歡這樣的開發體驗。
vite demo 代碼位址[3]
項目遇到的困難
困難總比辦法多，再多的問題都會慢慢被解決，項目會如期上線。項目的開發，磕磕碰碰，才有成長，學到東西才有意義。
輪播元件
應産品需求，輪播元件最終使用第三方插件，最初選用 vue-awesome-swiper ，但是 vue3 不支援，雖然官方有 vue3 的 demo，但是需要 vue2與 vue3 混用。
一番查找最後選用 swiper 插件，本身就支援了 vue3 ，而且他隻支援 vue3，救了我。
就是文檔寫的不太好，很多并沒有明确的暴露出來，需要去 swiper.js 文檔查找， swiper 本身支援現在主流的架構這是一個很棒的體驗，就是文檔這一塊需要加油。
虛拟滾動
頁面清單加載上百千條資料時，白屏時間長，滾動有卡頓。最開始考慮采用前端頁面分頁，隻要資料夠多頁面 dom 節點還是很多，達到一定量卡頓依舊存在。後來使用 vue-virtual-scroller 解決問題，但在網上看到大部分都是vue2版本的，vue3 版本都是在 issues 裡面找到的。
在使用過程中又遇到，缺少某些方法導緻無法滿足産品需求，最後源碼查找到滿足需求的方法。vue3 本身的文檔也不夠完善，如果能夠暴露更多的方法，而不是源碼找，體驗會更好。
但是這個項目在 github 上面的 star 很不錯，應該是靠譜的，隻是人家還沒來得及做吧，哈哈。
總結
以上就我個人這次項目實戰的經驗而言，在用新的 API 的時候，需要思考一個問題，邏輯點聚合，同時也要注意轉變代碼組織思維。這不僅是 vue2 和 vue3 的差別，而是一直以來我們應該思考的一個問題，每次開發都應該思考，如何能讓這個項目/元件能夠長期穩定的發展。架構的更新于使用者而言不僅僅是文法的更新，而應該去思考，架構在發展中遇到了什麼問題？他是如何解決的？為了我們開發的項目長期穩定可持續的發展，是否可以借鑒他們的經驗？
項目中使用到的技術棧及文檔
vite.config 的配置文檔 [4]
路由 router[5]
vue3[6]
輪播插件swiper[7]
虛拟滾動vue3 版本[8]
vue3/vite資料推薦
昨晚尤大的連麥直播，我學到了很多！！！[9]
vite 文檔[10]
備戰2021：vite工程化實踐，建議收藏[11]
手撸Vite，揭開Vite神秘面紗[12]
備戰2021：Vite2項目最佳實踐[13]
【譯】下一代前端建構工具 ViteJS 中英雙語字幕 ｜ 技術點評[14]
【譯】下一代前端工具 ViteJS 中英雙語字幕 - Open Source Friday[15]
忙了一夜用CompositionAPI征服産品妹子花裡胡哨的需求[16]
閃電五連鞭：Composition API原理深度剖析[17]
不要再用Vue 2的思維寫Vue 3了[18]
vue3 源碼解析[19]
References
[1]
什麼是組合式 API？: https://v3.cn.vuejs.org/guide/composition-api-introduction.html#%E4%BB%80%E4%B9%88%E6%98%AF%E7%BB%84%E5%90%88%E5%BC%8F-api
[2]
createWebHistory 支援設定base檔案目錄: https://next.router.vuejs.org/zh/api/#createwebhistory?fileGuid=t3GvJVRGxRkXgypy
[3]
vite demo 代碼位址: https://github.com/sunseekers/vite/blob/main/index.html
[4]
vite.config 的配置文檔 : https://cn.vitejs.dev/config/#mode
[5]
路由 router: https://next.router.vuejs.org/introduction.html
[6]
vue3: https://v3.cn.vuejs.org/guide/installation.html#%E5%91%BD%E4%BB%A4%E8%A1%8C%E5%B7%A5%E5%85%B7-cli
[7]
輪播插件swiper: https://swiperjs.com/vue
[8]
虛拟滾動vue3 版本: https://github.com/Akryum/vue-virtual-scroller/blob/next/packages/vue-virtual-scroller/README.md
[9]
昨晚尤大的連麥直播，我學到了很多！！！: https://juejin.cn/post/6960506633839443981#comment
[10]
vite 文檔: https://cn.vitejs.dev/guide/why.html
[11]
備戰2021：vite工程化實踐，建議收藏: https://juejin.cn/post/6910014283707318279
[12]
手撸Vite，揭開Vite神秘面紗: https://juejin.cn/post/6960110425438421006
[13]
備戰2021：Vite2項目最佳實踐: https://juejin.cn/post/6924912613750996999
[14]
【譯】下一代前端建構工具 ViteJS 中英雙語字幕 ｜ 技術點評: https://juejin.cn/post/6937176680251424775
[15]
【譯】下一代前端工具 ViteJS 中英雙語字幕 - Open Source Friday: https://www.bilibili.com/video/BV1kh411Q7WN
[16]
忙了一夜用CompositionAPI征服産品妹子花裡胡哨的需求: https://juejin.cn/post/6891885484524437518
[17]
閃電五連鞭：Composition API原理深度剖析: https://juejin.cn/post/6894993303486332941
[18]
不要再用 vue2 思想寫 vue3 了: https://mp.weixin.qq.com/s/w4n_WhbDqK4kgzxEHUWWfw
[19]
vue3 源碼解析: https://vue3js.cn/reactivity/reactive.spec.html