Vuejs 的優缺點

臺近秋 發佈 2023-06-09T12:06:07.534350+00:00

我從 vue 1.x 版本就開始使用了,2.x 和 3.x 版本現在都有在使用,算是我使用過時間最長的 mvvm 框架。下面是我的一些總結。優點開發效率高,這是選擇 Vuejs 的重要原因。

我從 vue 1.x 版本就開始使用了,2.x 和 3.x 版本現在都有在使用,算是我使用過時間最長的 mvvm 框架。下面是我的一些總結。

優點

開發效率高,這是選擇 的重要原因。以前我們使用 jquery 來做前端 ui 開發工作量是很大的,但是有了雙向綁定之後,效率得到大幅度提升。我們只需要適當的時候更改數據,視圖就會自動刷新。

現在的前端開發要求越來越高了,開始了工程化,需要一套工具來構建項目。Vue 官方一直有提供配套的腳手架工具,讓我們可以快速搭建項目,又進一步提升了開發體驗。為了能夠讓開發可以更效率,官方把 IDE 插件也給做好了,十分貼心。

前端項目的複雜度越來越高,單頁應用也越來越流行,於是我們又開始需要路由以及其它的很多組件。自己從零開始起步太艱難了,好在 Vue 官方提供了路由和狀態管理組件,並且社區有著非常豐富的插件,生態完善,應有盡有。可以說 Vuejs 是一個非常強大的企業級框架。

雖然 Vue 的生態很豐富,但是工具和重要的生態組件都有官方版本,這也避免了混亂。統一的好處就是更利於團隊協作,尤其是項目交接,接手了別人的項目,用的是你熟悉的技術,能夠快速上手。

Vue 之所以可以在國內這麼流行,很重要的一點就是官方有中文文檔,大大的方便了國內的程式設計師,這一點必須好評。

隨著 Vue 的流行,相關的教程和帖子也多起來了,如果遇到問題,網上很容易查到解決方案。官方網站上就有視頻教程。

缺點

Vuejs 使用了 Object.defineProperty 重寫 getter 和 setter 來實現數據的響應式,3.x 版本改用了 Proxy 來實現。但是,響應式並不完美,有時會遇到一些不響應的情況,需要開發時注意,2.x 和 3.x 都存在的。vue 提供了 $set 方法,如果要添加新屬性,可以使用它保證一定會響應。我之前在 3.x 中遇到過賦值不響應的情況,還做了記錄:記一次 vue3 數組不響應問題的排查,對象也有可能不響應 。用的多了,哪些情況會不響應有經驗了,儘可能避免。

雙向同步帶來的另一個問題就是容易死循環,尤其是在調用組件的情況下。如果在組件內修改傳遞來的參數,Vuejs 會有警告,後面的版本組件改成單向數據流了,組件內部的修改不會同步給調用處。 但是開發時自己還是要小心,尤其是開發支持指令 v-model 進行雙向同步的組件,組件內部一定要做好值的比對,值相同則忽略,不做處理。

學習成本有點高。不管 vue 還是 react ,它們都不單單是一個普通的庫,它們還是一門新語言,需要學習模板語法。相比 jquery ,vue 要學的東西還真不少,印象中 vue 一直在添加新特性,概念越來越多。不知道以後會不會形成類似 Java 框架 Spring 的八股文。

對 Typescript 的支持有限,類型推斷不完善。3.x 版本因為有歷史原因,仍然和之前的版本保持了很多相同的習慣,這讓從舊版本遷移成為可能。雖然在 3.x 版本中做了很多改善,但是對 Typescript 的支持依然不是很好,這也是沒有辦法的事。再有就是模板了,IDE 很難對組件的屬性有提示和類型推斷,很多時候都依賴於查文檔。我之前用 IDEA 是有一些提示的,現在用 vscode 安裝的官方插件是沒有提示的,不過 IDEA 上的 vue 插件很垃圾。

在 3.x 版本中,由於數據對象被代理了,可能會遇到一些問題。我之前就遇到過 indexedDB 不支持代理對象的情況,可以通過 JSON 序列化後再反序列化進行深度克隆來解決。

總結

對於軟體工程來說,常常是能解決複雜問題的方案自身也很複雜,引入新方案又會帶來新的問題。但凡複雜起來,就很難說沒有坑的。技術選擇往往是要權衡利弊的,整體來看我覺得選 vue 還是值得的。

關鍵字: