Vue 3是一個錯誤，我們不應該再犯。

前端小智發表於2022-07-12
Vue

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

文字是翻譯的，作者Fotis Adamakis， 他是 Vue.js雅典會議的共同組織者，文中的第一人稱指的是該大佬。

從最初引入Vue 3開始，已經過去了4年多。經過多次RFC的討論，以及其他現代框架（包括React和Svelte）的影響，Vue 可能已經成為最強大和最全面的框架，能夠逐步支援任何規模和架構的應用。

聽起來很刺激，對嗎？嗯，事實遠非如此。從那時起，就發生了很多延遲和降級的情況。儘管Vue 3最近成為了新的預設版本，但很多重要的支援庫還沒有準備好，甚至沒有計劃與兩個版本相容。這說明很多程式碼庫還停留在Vue 2上，遷移到版本3的路徑並不容易。

請不要誤解我，Vue 3非常棒。它可能是目前最好的框架了。但事實上，從第二版開始沒有簡單的遷移路徑，這是一個錯誤，我們不應該在未來重複。

Vue 2的問題

Vue一直被認為是一個進步的框架。選項API很容易理解，我們可以學習並在需要時引入更復雜的模式和庫。小的學習曲線和良好的文件是大家喜歡它的原因。

另一方面，在將通用邏輯抽象為mixin時，使用繼承而不是組合的體系結構缺陷造成了許多可伸縮性問題，並破壞了乾淨元件宣告的許多原則。Vue3 引入組合API 作為一種解決方案。

另一個重要的問題是對typecript的支援。當然，在Vue元件中編寫typescript就像在script標籤中新增type="ts"一樣容易。但在模板和 store 裡，支援是有問題的。

vue3 解決方案

完全重寫是一個改善框架內部結構的機會。Vue3 廣泛地使用了Typescript，包括響應性機制在內的許多方面都從頭開始。這使得Vue 3在資料包大小、初始渲染、更新和記憶體使用方面的效能得到了明顯的改善。

此外，還增加了很多新的功能。

  • Composition API
  • 語法糖 <script setup>
  • Fragments
  • Emits Component Option
  • 來自@vue/runtime-core的createRenderer API可以建立自定義渲染器
  • style 裡面可以繫結變數
  • SFC的<style scoped>現在可以包括全域性規則或只針對插槽內容的規則
  • Suspense

新功能改善了整體的開發體驗，歡迎很多開發都的追捧。爭論的焦點是，其中大部分功能，包括組合API、teleport、 suspense 等，在Vue 2中已經都能用了，所以它們不能真正算作框架的改進。

真正的問題

破壞的性變化，有很多。其中一些很簡單，比如Events API。Vue例項不能再用作事件匯流排，但有即插即用的解決方案，如 mitt 或 tiny-emitter，可以用作直接替代。這需要有一定工作時間，但可以及時完成，沒有太多風險。

另一方面，有些變化不能安全地進行，也不能不進行小規模或大規模的重構。在一個用Vue 2構建的現有大型應用中，你可能會使用一些被廢棄或改變的API。

遷移構建應該是兩個版本之間的橋樑，但由於有這麼多被廢棄的功能，它對大型專案並不適用。此外，官方對一些基本的支援庫的建議是遷移到另一個不同的庫，這進一步增加了複雜性。由於有這麼多的移動元件，即使遷移構建成功，也需要大量的工作，這對大專案來需要有更多的時間用來解決技術債務。

image.png

不需要的東西

Vue始終是一個有意義的框架。你可以試著猜測一個API應該如何工作，你很可能是對的。Vue 3不再是這種情況。

一個例子是關於新的基於函式的Vue元件編寫方式的意見徵集，有大量的回應，包括正面和負面的。不管你在這場爭論中的立場如何，將社群分成兩半絕不是一個好兆頭。

文件

在開發過程中，特別是在一個新的框架中，谷歌和StackOverflow是你最好的朋友。目前，Vue 2的答案佔據了壓倒性的優勢，但在Vue 3中，很多API實現的原理都不一樣了，因此可能會造成一定的混亂。

生態

一個框架有多強大，它的生態系統就有多強大。有爭議的決定和不負責任的廢棄功能驅使許多貢獻者離開，導致許多庫被放棄。但是，當你沒有給開源庫一個可行的方法來支援兩個版本的時候，就指責他們沒跟上你的版本時，這表明你缺乏同情心和對大局的理解。

一個框架的真正力量來自於它周圍的社群和生態系統。

過去

如果你有幸在2015年前後寫程式碼，你有可能會使用當時最主流的框架AngularJS。

轉到 Vue 3的看起來很像從 AngularJS 到 Angular（版本1⇒2）的過渡。大量的破壞性的變化導致了挫敗感，最終Angular失去了對React和Vue的吸引力。

如果你是一個全棧工程師，你可能熟悉大約10年前在Python生態系統中發生的同樣情況。在大約十年的時間裡，許多專案無法升級，因為許多核心庫沒有增加對Python 3的支援，而出現的新庫只支援Python 3。當然，後來的Python版本開始只在版本3上新增新的和閃亮的功能，這種混亂的情況還沒有真正結束。

未來--這種情況會再次發生嗎？

看起來前進的方向是向後退，把所有的東西都移植到遷移構建中，但是損害已經造成了，開發滿意度看起來並不樂觀，不能忽視。有遠見地讓框架參與進來是合理的，但開發經驗是框架的核心職責之一。Vue 4應該考慮到整個生態系統，並提供一個遷移路徑，否則它將成為沒有人願意使用的最佳框架。

到目前為止，你對Vue 3的遷移有什麼經驗？請在評論中分享你的想法和建議。

編輯中可能存在的bug沒法實時知道，事後為了解決這些bug,花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

作者：Chris 譯者：小智 來源：medium

原文：https://fadamais.medium.com/v...

交流

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

相關文章