Vuejs 3.0 正式版發布!One Piece. 代號:海賊王

2021-12-29 全棧修煉

Vue 團隊於 2020 年 9 月 18 日晚 11 點半發布了 Vue 3.0 版本。

那個男人總喜歡在深夜給我們帶來意外驚喜！

以下為 Vuejs Release 3.0 機器翻譯文章，原文 v3.0.0 One Piece。

「

https://github.com/vuejs/vue-next/releases/tag/v3.0.0

」

# Vue 3.0 發布

今天，我們很榮幸地宣布 Vue.js 3.0「One Piece」的正式發布。這個框架的新的主要版本提供了改進的性能、更小的捆綁大小、更好的 TypeScript 集成、用於處理大規模用例的新 API，以及為框架未來的長期迭代奠定了堅實的基礎。

3.0 版本代表了兩年多的開發努力，包括 30+ RFC，2600 多個提交，99 個貢獻者的 [628 個 PR]，以及核心倉庫之外的大量開發和文檔工作。在此，我們要對我們的團隊成員、貢獻者的拉取請求、贊助商和支持者的資金支持，以及更廣泛的社區參與我們的設計討論並為預發布版本提供反饋表示最深切的感謝。Vue 是一個獨立的項目，是為社區而創建的，也是由社區來維持的，如果沒有您的一貫支持，Vue 3.0 是不可能實現的。

## 進一步推進「漸進式框架」概念。

Vue 從一開始就有一個簡單的使命：成為一個任何人都能快速學會的平易近人的框架。隨著我們用戶群的增長，框架的範圍也在不斷擴大，以適應不斷增長的需求。隨著時間的推移，它演變成了我們所說的「漸進式框架」：一個可以逐步學習和採用的框架，同時隨著用戶應對越來越多的需求場景而提供持續的支持。

今天，我們在全球擁有 130 多萬用戶 *，我們看到 Vue 被應用於各種不同的場景，從在傳統的伺服器渲染的頁面上添加交互性，到擁有數百個組件的完整的單頁應用。Vue 3 將這種靈活性進一步提升。

## 分層內部模塊

Vue 3.0 核心仍然可以通過一個簡單的 <script> 標籤來使用，但它的內部結構已經被重新編寫成一個解耦模塊的集合。新的架構提供了更好的可維護性，並允許終端用戶通過 tree-shaking 減少多達一半的運行時大小。

這些模塊還暴露了底層的 API，解鎖了許多高級用例。

編譯器支持自定義 AST 轉換，用於構建時的自定義 (例如構建時的 i18n)。

核心運行時提供了一級的 API，用於創建針對不同渲染目標 (如原生移動端、WebGL 或終端 的自定義渲染器。默認的 DOM 渲染器也是使用相同的 API 構建的。

@vue/reactivity 模塊導出的函數可以直接訪問 Vue 的反應性系統，並且可以作為一個獨立的包使用。它可以與其他模板解決方案 (如 lit-html 配對使用，甚至在非 UI 場景中使用。

## 解決規模問題的新 API

在 Vue 3 中，基於對象的 2.x API 基本沒有變化。不過，3.0 還引入了 Composition API——一套新的 API，旨在解決 Vue 在大規模應用中的使用痛點。組成 API 建立在反應性 API 之上，實現了類似於 React 鉤子的邏輯組成和重用，比 2.x 基於對象的 API 更靈活的代碼組織模式和更可靠的類型推理。

Composition API 也可以通過 @vue/composition-api 插件與 Vue 2.x 一起使用，目前已經有適用於 Vue 2 和 3 的組成 API 實用庫 (如 vueuse、vue-composable。

### 性能改進

Vue 3 與 Vue 2 相比，在捆綁大小 (tree-shaking 時減少了 41%)、初始渲染 (快了 55%)、更新 (快了 133%) 和內存使用 (少了 54%) 方面都有顯著的性能提升。

在 Vue 3 中，我們採取了「compiler-informed 虛擬 DOM」的方法：模板編譯器執行積極的優化，並生成渲染函數代碼，以提升靜態內容，為綁定類型留下運行時提示，最重要的是，扁平化模板內的動態節點，以減少運行時遍歷的成本。因此，用戶可以獲得兩全其美的效果：從模板中獲得編譯器優化的性能，或者在用例需要時通過手動渲染函數直接控制。

### 改進的 TypeScript 集成

Vue 3 的代碼庫是用 TypeScript 編寫的，具有自動生成，測試和捆綁的類型定義，因此它們始終是最新的。Composition API 可以很好地處理類型推斷。Vetur 是我們的官方 VSCode 擴展，現在利用 Vue 3 改進的內部鍵入功能支持模板表達式和 props 類型檢查。哦，如果您願意，Vue 3 的打字完全支持 TSX。

### 實驗特性

我們為單文件組件 (SFC，即 .vue 文件) 提出了兩個新特性：

<script setup>：在 SFC 中使用 Composition API 的語法糖

<style vars>：單文件組件中狀態驅動 CSS 變量

這些功能已在 Vue 3.0 中實現並可用，但僅出於收集反饋的目的而提供。在 RFC 合併之前，它們將保持試驗狀態。

我們還實現了一個當前未公開的 <Suspense> 組件，該組件允許在初始渲染或分支開關上等待嵌套的異步依賴項 (異步組件或具有 setup() 的組件)。我們正在與 Nuxt.js 團隊一起測試和迭代此功能 (Nuxt 3 即將發布，並且很可能會在 3.1 版中將其固化。

## 分階段發布流程

Vue 3.0 的發布標誌著該框架的全面就緒。儘管某些框架子項目可能仍需要進一步的工作才能達到穩定狀態 (特別是 devtools 中的路由器和 Vuex 集成)，但我們認為今天使用 Vue 3 啟動新的綠色項目是合適的。我們還鼓勵圖書館作者開始升級您的項目以支持 Vue 3。

請查閱 Vue 3 工具庫指南以獲取有關所有框架子項目的詳細信息。

## 遷移和 IE11 支持

由於時間限制，我們已推遲了遷移版本 (具有 v2 兼容行為的 v3 版本 + 遷移警告) 和 IE11 版本，並計劃在 2020 年第四季度重點關注它們。因此，計劃遷移現有 v2 應用程式的用戶或要求 IE11 支持人員此時應意識到這些限制。

### 下一步

發布後的短期內，我們將專注於：

新 devtools 中的 Router 和 Vuex 集成

目前，面向 Vue 3 和 v3 的項目的文檔網站，GitHub 分支和 npm dist 標籤將保持在下一個狀態。這意味著 npm install vue 仍將安裝 Vue 2.x，npm install vue@next 將安裝 Vue 3。我們計劃在 2020 年底之前將所有文檔連結，分支和 dist 標籤切換為默認值 3.0。

同時，我們已經開始計劃 2.7，這將是 2.x 發行版的最後一個計劃的次要發行版。2.7 將向後移植來自 v3 的兼容改進，並發出有關 v3 中已刪除/更改的 API 使用情況的警告，以幫助潛在的遷移。我們計劃在 2021 年第一季度開發 2.7，它將在發布後直接變為 LTS，預計有 18 個月的維護時長。

## 嘗試一下

要了解有關 Vue 3.0 的更多信息，請訪問我們的[新文檔網站](https://v3.vuejs.org/](https://v3.vuejs.org/)。如果您是現有的 Vue 2.x 用戶，請直接轉到遷移指南。

「

https://v3.vuejs.org/

」

根據 Google 報告的每周 Vue Devtools Chrome 擴展活躍用戶。

「

https://github.com/vuejs/docs-next-zh-cn

」

相關焦點

  • 前端周報:Vue 3.0正式發布,代號One Piece;JS庫 Moment.js 進入維護狀態;iOS 14 正式發布
    Vue 3.0 正式發布：代號「One Piece」 2020 年 9 月 18 日晚，Vue 團隊發布了 Vue 3.0 正式版本，代號為 One Piece(海賊王)。本次主版本更新包含性能的改進，更小的 bundle 體積，對 TypeScript 更好的支持，用於處理大規模用例的全新 API，以及為框架未來的長期迭代奠定了夯實的基礎。
  • 海賊王 One Piece,一起康康 Vue 版本號中的彩蛋
    （給前端大全加星標，提升前端技能）作者：霍語佳 - 前端食堂（本文來自作者投稿）如果你在 Vue 的倉庫中看過 Releases 歷史，你會發現有一些版本發布時會帶上代號不知你是否會好奇這些代號的含義呢？
  • Vue 3.0 正式發布了!
    Vue 團隊於 2020 年 9 月 18 日晚 11 點半發布了 Vue 3.0 版本，我們連夜對 Release 進行了翻譯。由於時間倉促，文中如有翻譯不當的地方還望提出。如有侵權，請聯繫刪帖。以下為譯文正文。今天，我們非常自豪地宣布 Vue.js 3.0 "One Piece" 發布。
  • Vue 3.0 正式版發布|全美今日下架微信和TikTok
    Vue 官方團隊於 2020 年 9 月 18 日晚 11 點半左右發布了Vue3.0版本 🎉。
  • Vue CLI 3.0 正式發布,Vue.js 開發標準化工具
    作者：王練文章轉載自 開源中國社區 http://www.oschina.netVue CLI 3.0已發布，該版本經歷了重構，旨在：減少現代前端工具的配置煩擾，尤其是在將多個工具混合在一起使用時；儘可能在工具鏈中加入最佳實踐，讓它成為任意 Vue 應用程式的默認實踐。
  • Vue Router 4.0 正式發布!
    今天，Vue Router 4 正式發布穩定版本。「發布地址：https://github.com/vuejs/vue-router-next/releases/tag/v4.0.0」參考資料[1]RFC:https://github.com/vuejs/rfcs/pulls?
  • ONE PIECE 你的寶藏小站!
    雖然小夢不常看動漫，但是像海賊王，柯南，銀魂等這些比較有名的動漫還是有些了解的！今天就給大家介紹一個海賊小站!如果你也是一名海賊，呸，如果你也是一名海賊迷，那就一定不要錯過哦！海賊小站專注於海賊王動漫與漫畫的收集！估計站長也是一名海賊王的狂熱粉絲吧！哈哈！極致專注，方為熱愛！
  • Vue Router 4.0 正式發布!煥然一新.
    Vue Router 4 正式發布穩定版本。「發布地址：https://github.com/vuejs/vue-router-next/releases/tag/v4.0.0」參考資料[1]RFC:https://github.com/vuejs/rfcs/pulls?
  • 前端組件框架方案Vue.js 1.0發布,初始化渲染性能100%
  • Vue 3.0 語法快速入門
    的beta版新聞了，是的，尤大大在4.17號微博曬出了Vue3.0的beta連結，不少FEer開始興奮，不過也有不少其它聲音：『我學不動了』、『這不就是React』、『啥時候出正式版』；Vue3.0-beta連結：https://github.com/vuejs/vue-next#status-beta那麼首先，我們先簡單看一下Vue發布版本的過程：Alpha
  • Vue3.0--Vue Composition API使用體驗
    本文將之前採用Vue2.6開發的todoList小項目改造成為Vue3.0編寫，並介紹一下2.x和3.x之間寫法的不同之處。點擊體驗[1] Github地址：Vue.js2.6版本todoList[2]，Vue.js3.0版本todoList[3]Vue3.x適配大部分Vue2.x的組件配置，也就是說以前我們在Vue2.x針對組件的一些配置項，例如：
  • Vue 3發布
    Vue.js 3.0 "One Piece" 已正式發布，此框架新的主要版本提供了更好的性能、更小的捆綁包體積、更好的 TypeScript 集成
  • vue cli 3.0創建項目
    >使用命令創建命令：vue create vueapp1、使用上下箭頭選擇默認設置還是手動選擇功能Vue CLI v3.0.3?：使用 TypeScript 書寫源碼PWA：漸進式WEB應用Router：使用vue-routerVuex：使用vuexCSS Pre-processors：css預處理器Linter / Formatter：代碼規範標準Unit Testing：單元測試E2E Testing：e2e測試Vue CLI v3.0.3?
  • 海賊王手遊新作《海賊王寶藏巡航》正式上架
    Bandai Namco於本日(5月12日)公佈以人氣動漫海賊王為題的手遊新作《ONE PIECE トレジャークルーズ》正式在iOS及Android
  • Node.js v8.0.0 正式發布;Nginx 1.13.1 發布;Qt 5.9 正式發布
    新版主要的特性包括：npm 客戶端升級到 5.0.0 版；基於 Chrome JS 引擎 V8 升級到 v5.8；Node.js API (N-API)允許創建原生擴展，編譯一次可在多個 Node 版本中使用；更新 async_hooks 模塊；完整支持 WHATWG URL API 解析器；Buffer API 引入了大量新變化；新的 util.promisify() API； console 模塊加入
  • Vue 服務端渲染 Nuxt.js 用起來真的挺香的.
    需要注意的是，pages 目錄是必須的，Nuxt.js 框架會自動讀取該目錄下所有的 .vue 文件並自動生成對應的路由配置。路由基礎路由基礎路由不需要配置，Nuxt.js 會根據 pages 中的文件夾及文件自動生成路由配置。
  • 全面總結 Vue 3.0 的新特性
    Vue3.0從20年九月發布第一個One Piece版本，到現在一直在更新優化；中文版的官方文檔也已經放出；那麼作為終端用戶的我們來看下Vue3新增了哪些功能和特性。而在Vue3中，所有的API都通過ES6模塊化的方式引入，這樣就能讓webpack或rollup等打包工具在打包時對沒有用到API進行剔除，最小化bundle體積；我們在main.js中就能發現這樣的變化：//src/main.jsimport { createApp }
  • 【項目推薦】Vue.js
    作者是尤雨溪,寫下這篇文章時 vue.js版本為 1.0.7 。我推薦使用 sublime text 作為編輯器，關於這個編輯器可以看我這篇文章。 </div> </div> </div></body></html>當然你也可以在 github 上 clone 最新的版本並作為單文件引入，或者使用 CDN:http://cdn.jsdelivr.net/vue/1.0.7/vue.min.js
  • Vue.js最佳實踐(五招讓你成為Vue.js大師)
    如果有人需要Vue.js入門系列的文章可以在評論區告訴我，有空就給你們寫。對大部分人來說，掌握Vue.js基本的幾個API後就已經能夠正常地開發前端網站。但如果你想更加高效地使用Vue來開發，成為Vue.js大師，那下面我要傳授的這五招你一定得認真學習一下了。
  • Vue.js新手入門指南
    Vue.js就是一個用於搭建類似於網頁版知乎這種表單項繁多，且內容需要根據用戶的操作進行修改的網頁版應用。　3.單頁應用程式（SPA）　　顧名思義，單頁應用一般指的就是一個頁面就是應用，當然也可以是一個子應用，比如說知乎的一個頁面就可以視為一個子應用。單頁應用程式中一般交互處理非常多，而且頁面中的內容需要根據用戶的操作動態變化。