Vue 團隊在昨天(2020/09/18)正式發佈代號為「海賊王 One Piece」的 Vue 3.0,很快在知乎己有發佈公告的中文翻譯。我在一些「輕前端」專案引用 Vue.js 2.x 處理網頁元素互動操作時的 MVVM,自然要觀注 Vue 的版本發展,而這次關心重點不外乎:Vue 3.0 有什麼優點?值不值得馬上升級?升級難度如何?

再簡單定義一下我所謂的「輕前端」。

我的網站專案幾乎都是 ASP.NET MVC 或 ASP.NET Core,網頁本體主要以 .cshtml 輸出 HTML 產生(不管 MVC 或 Razor Pages 皆然),JavaScript 只是輔助,與伺服器端溝通則是透過 AJAX 呼叫,單純操作甚至會用 PostBack 打發。為降低技能門檻,都避免牽扯 npm install、webpack、TypeScript 等安裝編譯機制,單純靠 <script> 引用 jQuery、Vue 解決,JavaScript 程式多直接內嵌於網頁,共用函式或程式較長時才拆成 .js 檔。這種前端開發模式雖然跟當前主流滿滿 npm、webpack 的前端開發做法有點脫節,但幾乎所有 WebForm/MVC 開發者都快速上手。而這幾年的主流前端框架中,React.js、Angular.js 都有一整套自己的開發架構、程序,要用專案就得變成它們的形狀,惟有 Vue.js 是所謂「漸進式框架」(Progressive Framework),以依需求決定服用濃度或深度,我就用酒來比喻好了:

  1. 18 天生啤(3.5%)
    直接在網頁引用 vue.js 就好,簡單實現 MVVM、表單驗證、AJAX。(輕前端停在這一級,解渴為主)
  2. 威士比(10%)
    使用 Vue Render 產生所有 HTML/DOM
  3. 威士忌(41%)
    使用 vue-router 走前端路由,若要寫 SPA,多半要推到這一級
  4. 五加皮(58%)
    專案規模更大時,使用 vuex 解決難以管理的狀態
  5. 金門大麴(65%)
    考慮 SEO,納入 Server-Side Render 機制

Vue 3.0 從底層做了大幅改寫,衍生不少不相容改變,對舊版用得愈廣愈深,換版調整的工程就愈大(像 AngularJS 到 Angular 2 形同砍掉重練,我就棄坑了)。我在一些專案已運用 Vue 2.x,但輕前端喝生啤純止渴,酒癮不深,這回遇上框架改版衝擊也小,算是走輕前端策略的優勢吧!

簡單整理 Vue 3.0 亮點:

  • 仍然支援 <script> 直接引用(我愛 18 天!),但內部結構重新拆分模組,允許 Tree-Shaking 排除未使用模組減少 .js 體積。另外,某些功能被模組化之後,開放了一些進階 API,得以玩出更多花式應用,但我應該用不到。
  • Composition API (適用於大規模應用,酒鬼專用,我也跳過)
  • 性能提升:與 Vue 2 相比,初始 Render 速度加快 55%,更新速度加快 133%,記憶體使用減少 54%! 我的應用情境前端效能很少是瓶頸,但此次的差異幅度肯定能增進使用者體驗。
  • Vue 3 全面改用 TypeScript 開發,跟 TypeScript/VSCode 的整合性大增,並支援 TSX。(我使用 Visual Studio + 純 JavaScript 開發,對此較無感)
  • SFC (Single File Component, .vue)加入兩個實驗性功能:script setup & style vars。(尚未用到 .vue,跳過)
  • Vue 3 的 router、Vuex、devtools 要稍晚才會陸續發佈。(沒用到所以沒差)
  • Vue 3 對 IE11 的支援,以及現有 V2 專案升級 V3 的配套,預計得等 2020 第四季才會就緒。(我的用戶端需要支援 IE11,這點算關鍵)

整體看下來,輕前端用得淺,較有關的兩點是效能提升及 IE11 支援要等年底。基於效能大幅提升加上 Vue 3 未來勢必取代 Vue 2,在行有餘力的前提下,儘早為升級 Vue 3 做好準備是必要的,但考量 IE11 支援,明年會是較好的升級時機。

最後,來看看 V2 升級 V3 的難度。官方文件有篇升級指南,Breaking Changes 章節是最權威的參考來源。

依據 Vue 開發團隊的建議,開發團隊目前仍在努力開發 Migration Build 版的 Vue 3,它能針對不相容的舊版寫法提出警告,故重大專案建議等 Migration Build 釋出後再升級較輕鬆且穩當。

巡過一輪,摘要幾個我可能用到,評估需要改寫的地方:(完整說明請自行參考官方文件,寫得好清楚,許多還有新舊版寫法對照,大推。另外,Kuro 有篇酒味濃郁的 2.6 升 3.0 的實戰心得也值得一看,但很多是輕前端用不到的功能就是了)

  1. 不再提供全域式的註冊(Vue.component()、Vue.directive()),用 createApp() 取代 new Vue()
    這部分影響很大,幾乎所有程式都要調整,順手的做法有待琢磨
  2. Vue Component v-model 做法修改:預設名稱由 value 改 modelValue,但開放 v-model 綁定多組屬性 (這點超讚,我喜歡)
  3. v-if/v-else/v-for 的 key 寫法改變
  4. v-if 與 v-for 並存時,Vue 3 改成 v-if 優先
  5. 元素上 v-bind 宣告與目標屬性宣告並存時,以後者為準
  6. destroyed 更名為 unmounted、beforeDestroy 更名為 beforeUnmount
  7. data 不再接受直接宣告物件,統一要用 function() 傳回物件
  8. watch 監測陣列改為只在整個陣列被置換時觸發,若要偵測陣列改變,需傳入 deep 選項
  9. 移除 $on、$off、$once 事件

研究心得:如果要繼續使用 Vue,升級 3.0 是不可避免的。從輕前端的角度,Vue 3.0 最大的提升在於效能,因應用較淺,升級所需調整還好。但因目前還缺少 Migration Build 及不支援 IE11,明年是較佳的升級時機。

A overvie of Vue 2.x to 3.0 imgration from the viewpoint of "light" front-end developer.


Comments

# by Kg

原本也是用輕前端架構,但最近發現Vue.js會要求CSP要有'unsafe-eval',但資安又要求不能有。

# by Jeffrey

to Kg, 大驚! 查到這篇 https://ithelp.ithome.com.tw/articles/10222921 用 render 太累了,JSX 的話逃不掉事前編譯,若一切資安說了算,只能棄守 Vue 輕前端惹...

# by sam

想請問<script> 直接引用,可以用vuetify裡面的Component嗎(例如autocomplete) 專案本身是asp.net mvc,也想用這種方式省一些造輪子的時間

Post a comment