關於 Vue 的好與壞

我常常會說 vue 是自助餐，他從來不是「限制你」，而是他提供數種寫法。它寫起來真的很自由，很隨意。

好處一：九種以上的寫法組合

基礎的寫法除了 optional 和 composition 兩大寫法外，其實還有一種由社群提供的 class component 的寫法。在於 VNode 產生的部分也有 template 、jsx、render function 三種寫法，各自有自己的特性與優缺點。而這3種 component api 和 3 種 render pattern 又可以各自交叉組合，變化的寫法起碼9種以上。甚至Vue 3.3後還誕生了 function component 的寫法，可以說是它不斷在支援不同的族群撰寫偏好，提供了龐大的包容性。

好處二：全自動的依賴樹

再來就是全自動的依賴樹，在你做 observe 的綁定時就自動對變數進行依賴樹的建立，當你修改了任何資料它都會很聰明的去把必要的變數和元件更新，不去做不必要的渲染計算。

它有所謂的「實體」，可以針對實體去進行多種操作，所以介面上很方便。相對的也有一點麻煩的地方是，因為這份方便與自由產生的許多問題。

好處三：模板把難的地方封裝掉了

最重要的一點就是模板，許多框架成也模板敗也模板。我明顯感受到模板把許多 JavaScript 很困難的地方變得簡單，把很多艱澀難懂的特性直接封裝幫你處理好。

壞處，也是同一批東西的另一面

不過講了很多好，壞也同時也是一體兩面。

正因為它的自由與隨意，也有可能發生在一個專案中充斥著各種不同的寫法。導致閱讀起來極其辛苦。更可能發生混合寫，導致api 的使用變得更加複雜。

全自動的依賴樹常常會發生 「殺雞用牛刀」的情況，在邏輯不複雜的變數和元件也經常會過度的檢查與處理。如果操作者不清楚特性，綁定了高頻率更新的物件，會導致不必要的國度運算。

也因為它存在物件實體和各種全域註冊的寫法，回頭查依賴也非常難以回溯。甚至產生各種節點的搜尋謬誤，會不經意做出各種「DOM」操作。

也正因模板帶來的低成本，也造成它跟 JavaScript 有莫大的差異，如果使用者不花時間精進 JavaScript ，那可能仍然什麼都不懂。也對本身熟悉 JavaScript 的人產生高昂的學習成本。當然你也可以使用 jsx 的寫法，卻也失去模板的優勢。

官方一直在補的兩個洞：編輯器與 TypeScript

另外就是官方努力改善的問題。

因為使用模板，所以需要各種插件來改善開發體驗，很難運用純粹的 JavaScript 的編輯器輔助。所以從過去 Vetur 到現在的 Volar 不斷改善模板的編輯器提示。

因為 vue 直接把「功能」切分出去，包含 lifecycle, computed, slot, emit, watch… 等等功能都需要去定義，進而也導致 TypeScript 的型別極其複雜難以處理，過去 component 也不支援泛型的定義。但隨著 vue2 的 class component ，vue3 的 composition api，甚至是 3.3 開始支援泛型傳入，整個 TypeScript 生態圈逐漸完善。

它不是我的主力，卻是我最喜歡的框架

Vue 不是我使用的第一個框架，也不是我現在工作主力使用的框架，卻是我最喜歡的一個框架。龐大的生態圈和眾多開發者協力完成的工具，沒有任何公司名號支持從素人開發者誕生的框架，這也是為人津津樂道。真要說我感受到的缺點就是歐美普及率低，高薪工作幾乎都是要找 React 的開發者，現實面就是這樣。現在台灣市場的 junior 幾乎人人會寫 Vue，但是真的能敢說深入了解這個框架的少之又少。