相對于Vue2.0 3.0有了比較大的改進,優勢主要有以下幾點:
一、性能提升
1、Vue3.0的響應式系統使用了Proxy代理對象,取代了Vue2.0中的Object.defineProperty,使得Vue3.0的響應式系統更快、更靈活。
2、Vue3.0對TypeScript的支持更加友好,提供了更準確的類型推斷和更好的類型檢查,使得在使用TypeScript時開發更加順暢。
3、優化了diff 的算法,新增了靜態標記PatchFlag:在創建vnode的時候,會根據vnode的內容是否可以變化,為其添加靜態標記PatchFlag。在diff的時候,只會比較有PatchFlag的節點,這減少了需要比對的內容,提高了效率。
4、靜態提升:對于不參與更新的vnode,Vue3.0會做靜態提升,只會被創建一次,在re-render時直接復用,這避免了不必要的重新創建。
5、事件偵聽緩存:在Vue2.0中,事件偵聽屬性需要進行對比,但在Vue3.0中,如果事件是不會變化的,會將事件偵聽屬性緩存起來(跟靜態提升達到的效果類似),該節點也不會被標記上PatchFlag,這節約了不必要的性能消耗。
6、減少創建組件實例的開銷:在Vue2.x中,每創建一個實例,在this上要暴露data、props、computed這些,都是靠Object.defineProperty去定義的,這部分操作比較費時。而在Vue3.0中,基于Proxy,減少了創建組件實例的性能開銷。
二、體積更小:
Vue3.0的核心庫經過優化,體積更小,加載速度更快。這對于移動端應用和性能敏感的應用來說非常重要。同時,Vue3.0的模塊系統被重新設計,支持更好的Tree-shaking,這意味著在構建應用時可以更輕松地剔除未使用的代碼,減小最終打包文件的體積。
三、更易于維護:
Vue3.0引入了新的組合式API(Composition API),允許開發者更靈活地組織組件邏輯。與Vue2.0的Options API相比,Composition API更容易理解和維護,尤其是在處理大型和復雜的組件時。同時,Vue3.0還引入了Teleport特性,允許在DOM樹的任意位置渲染組件,這使得在應用中創建復雜的布局變得更加容易,同時提高了靈活性和可維護性。
composition api:本質上應該就是要去解決傳統vue2的options api的兩個問題:
問題1:就是一個功能塊代碼分散到各個options上,比如data去處理reactive數據,props去接收外部參數,methods對各種操作相應等,當該模塊功能越來越多時,維護起來相當麻煩
問題2:就是各個模塊通過mixins共享數據和方法時導致的混亂。比如功能一復雜,我們往往都搞不清楚一個方法或者變量是來自哪里的,更別提一不小心引發的命名沖突了。
Vue3通過將需要的函數和數據都統一集中組合到setup中,當然就解決了問題1所說的完成一個功能所需要的代碼過于分散難以維護的問題了。
同時,因為vue3中需要用到的數據和方法都是通過setup來返回才能被使用的,而返回數據的地方相當集中,且加上typescript賦予vscode等代碼編輯工具的類型檢測功能,這樣就基本避免了mixins帶來的問題2。
四、更強大的自定義指令:
Vue3.0引入了更強大的自定義指令系統,使得開發者可以更容易地創建和管理自定義指令,增加了框架的靈活性和可擴展性。
五、更好的生態系統:
隨著Vue的不斷發展,Vue3.0的生態系統也在不斷壯大,包括了豐富的第三方庫和工具,為開發者提供了更多選擇和可能性。