Vue.js 3.0 "One Piece" 正式版發布

2021-12-23 w3ctech
編者按:今天凌晨 Vue.js 作者尤雨溪發布微博,這條微博代表著 Vue 3.0 "One Piece" 正式發布啦!Vue.js 3.0 正式版發布的內容為英文版本,原文見:https://github.com/vuejs/vue-next/releases。

今天,我們非常自豪地宣布 Vue.js 3.0 "One Piece" 發布。本次主版本更新包含性能的改進,更小的 bundle 體積,對 TypeScript 更好的支持,用於處理大規模用例的全新 API,以及為框架未來的長期迭代奠定了夯實的基礎。

3.0 的發布意味著兩年多以來的努力,其中包含 30+ RFC[1],2600+ commits,99 位貢獻者[2]所提交的 628 個 PR[3],還有許多除核心倉庫以外的開發及文檔編寫工作。在此對 Vue 團隊成員表示最深切的感謝,感謝貢獻者們提交的 PR,感謝贊助商和 sponsors[4] 的資金支持,感謝廣大社區成員參與預發布版本的設計與談論,並提供反饋。Vue 是一個獨立項目,為社區建立,也由社區維護,沒有大家的鼎立支持,Vue 3.0 是不可能實現的。

進一步推進 "漸進式框架" 概念

Vue 從開始就有一個簡單的使命:成為任何人都能快速學習且平易近人的框架。隨著我們用戶群體的增長,框架的應用範圍也在不斷擴大,以適應不斷迭代的需求。隨著時間的流逝,它演變成了 "漸進式框架":一個可以逐步學習和採用的框架,同時為用戶提供持續支持,以應對越來越多的苛刻場景。

時至今日,我們在全球擁有 130 多萬的用戶,我們看到 Vue 被應用於各種不同的場景中的可能,從在傳統的服務端渲染頁面之上添加交互,到擁有數百個組件的完整單頁應用。Vue 3.0 將這種靈活性進一步提升。

分離內部模塊

Vue 3.0 核心仍然通過一個簡單的 <script> 標籤來使用,但其內部結構已經被重寫,並解耦成一個個模塊的集合[5]。新的架構下為源碼提供了更好的可維護性,並允許終端用戶通過 tree-shaking 的形式將減少一半的運行時體積。

這些模塊還暴露了底層 API,解鎖了許多高級用法:

編譯器支持自定義 AST 轉換,用於在構建時自定義(如,在構建時進行 i18n 操作[6])

核心運行時提供了一系列 API,用於針對不同渲染目標(如 native moile[7]、WebGL[8] 或終端[9])的自定義容器。默認的 DOM 渲染器也使用這系列 API 構建。

`@vue/reactivity` 模塊[10]導出的功能,可以直接訪問 Vue 的響應式系統。並且可以作為一個獨立的包進行使用。它可以與其他模塊解決方案配對使用(如 lit-html[11]),甚至是在非 UI 場景中使用。

用於解決規模問題的全新 API

在 Vue 3.0 中,基於對象的 2.x API 基本沒有變化,並引入了 Composition API[12] — 一套全新的 API,旨在解決 Vue 在大規模應用場景中的痛點。Composition API 構建於響應式 API 之上,實現了類似於 React hook 的邏輯組成與復用,相較於 2.x 基於對象的 API 方式來說,擁有更加靈活的代碼組織模式,以及更為可靠的類型推斷能力。

Composition API 同時還提供了適用於 Vue 2.x 的版本,可通過 `@vue/composition-api`[13] 插件來在項目中使用,目前已有適用於 Vue 2 和 Vue 3 的 Composition API 實用的工具庫(如 `vueuse`[14],`vue-composable`[15])。

性能提升

Vue 3 與 Vue 2 相比,在 bundle 包大小方面(tree-shaking 減少了 41% 的體積),初始渲染速度方面(快了 55%),更新速度方面(快了 133%)以及內存佔用方面(減少了 54%)都有著顯著的性能提升[16]。

在 3.0 中,我們採取了 「編譯信息虛擬 DOM」 的方式:針對模板編譯器進行了優化,並生成渲染函數代碼,以提升靜態內容的渲染性能,為綁定類型留下運行時提示,最為重要的是,模板內部的動態節點進行了扁平化處理,以減少運行時遍歷的開銷。因此,用戶可以獲得兩全其美的效果,從模板中獲得編譯器優化後的性能,或在需要時通過手動渲染函數直接控制。

改進與 TypeScript 的兼容

Vue 3 的代碼庫完全採用 TypeScript 編寫,自動生成、測試並構建類型聲明,因此它們總為最新。Composition API 可以很好的進行類型推斷。Vetur,官方推出的 VSCode 插件,現已支持對模板表達式和 props 的類型檢查,同時,Vue 3 已全面支持 TSX[17]。

實驗特性

我們為單文件組件提出了兩個新特性[18](SFC,又稱為 .vue 文件):

這些特性在 3.0 中均已實現且可用,但提供這些特性的目的只是為了收集反饋。在最終合併到 RFC 之前,這些特性仍是實驗性的。

我們還實現了一個目前尚未編寫文檔的 <Suspense> 組件,它允許在初始渲染或 branch 切換時,等待嵌套的異步依賴(異步組件或帶有 async setup() 組件)。我們正在與 Nuxt.js 團隊一起測試和迭代此功能(Nuxt 3 正在開發中[19]),並可能會在 3.1 時完善它。

分階段發布

Vue 3.0 的發布意味著本框架的整體準備就緒。雖然框架的一些子項目還需進一步完善才能達到穩定狀態(特別是 router 以及 Vuex 與 devtools 的集成),但我們相信現在已經可以使用 Vue 3 開啟全新的項目。同時,我們也鼓勵庫作者開始升級項目以支持 Vue 3。

查閱 Vue 3 的庫指南[20],以了解框架所有子項目的詳細進展。

遷移與 IE11 的支持

由於時間限制,我們推遲了遷移構建(v3 兼容 v2 的構建,以及遷移警告)和兼容 IE11 的計劃,並打算在 2020 年 Q4 集中進行。因此,計劃遷移現有 v2 應用或需要兼容 IE11 的用戶,目前應注意限制。

下一階段工作

對於發布後的一段時間內,我們將重點關注:

目前,Vue 3 及其相關子項目的文檔站、github 分支以及 npm 的 dist 標籤都將保持在 next 狀態。這意味著 npm install vue 仍會安裝 2.x 版本,而通過 npm install vue@next 將會安裝 v3 版本。我們計劃在 2020 年底之前將所有文檔連結,分支以及 npm 標籤全部切為 3.0。

與此同時,我們已開始規劃 2.7 版本,這將會是 2.x 的最後一個小版本。2.7 將與 v3 進行兼容改進,並對使用 v3 中已刪除/更改的 API 發出警告,以更好的幫助 3.0 的遷移升級工作。我們計劃在 2021 年 Q1 進行 2.7 的工作,發布後將直接成為 LTS 版本,維護周期為 18 個月。

試用

欲了解更多關於 Vue 3.0 的信息,請查閱全新的文檔站[21],如果你是 2.x 的老用戶,請直接查看遷移指南章節[22]。

參考資料[1] 30+ RFC: https://github.com/vuejs/rfcs/tree/master/active-rfcs
[2] 99 位貢獻者: https://github.com/vuejs/vue-next/graphs/contributors
[3] 628 個 PR: https://github.com/vuejs/vue-next/pulls?q=is%3Apr+is%3Amerged+-author%3Aapp%2Fdependabot-preview++sort%3Aupdated-desc
[4] 贊助商和 sponsors: https://github.com/vuejs/vue/blob/dev/BACKERS.md
[5] 解耦成一個個模塊的集合: https://github.com/vuejs/vue-next/tree/master/packages
[6] 在構建時進行 i18n 操作: https://github.com/intlify/vue-i18n-extensions
[7] native moile: https://github.com/rigor789/nativescript-vue-next
[8] WebGL: https://github.com/Planning-nl/vugel
[9] 終端: https://github.com/ycmjason/vuminal
[10] @vue/reactivity 模塊: https://github.com/vuejs/vue-next/tree/master/packages/reactivity
[11 ]lit-html: https://github.com/yyx990803/vue-lit
[12] Composition API: https://v3.vuejs.org/guide/composition-api-introduction.html
[13] @vue/composition-api: https://github.com/vuejs/composition-api
[14] vueuse: https://github.com/antfu/vueuse
[15] vue-composable: https://github.com/pikax/vue-composable
[16] 顯著的性能提升: https://docs.google.com/spreadsheets/d/1VJFx-kQ4KjJmnpDXIEaig-cVAAJtpIGLZNbv3Lr4CR0/edit?usp=sharing
[17] Vue 3 已全面支持 TSX: https://github.com/vuejs/vue-next/blob/master/test-dts/defineComponent.test-d.tsx
[18] 兩個新特性: https://github.com/vuejs/rfcs/pull/182
[19] Nuxt 3 正在開發中: https://nuxtjs.slides.com/atinux/state-of-nuxt-2020
[20] Vue 3 庫指南: https://v3.vuejs.org/guide/migration/introduction.html#supporting-libraries
[21] 全新的文檔站: https://v3.vuejs.org/
[22] 遷移指南章節: https://v3.vuejs.org/guide/migration/introduction.html

相關焦點

  • 前端周報: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,以及為框架未來的長期迭代奠定了夯實的基礎。
  • vue-element-admin 4.0.0 正式版發布
    v4.0版本正式發布。
  • Vue CLI 3.0 正式發布,Vue.js 開發標準化工具
    Vue CLI 3.0 已發布,該版本經歷了重構,旨在:減少現代前端工具的配置煩擾,尤其是在將多個工具混合在一起使用時;儘可能在工具鏈中加入最佳實踐,讓它成為任意
  • Vue.js 框架作者公布 Vue 3 最新進展
    Vue.js 作者尤雨溪近日介紹了 Vue 3 的最新進展。因此原本計劃 2020 年上半年發布 Vue 3,但考慮到目前的進度,不得不進行調整。現在的計劃是 7 月中旬發布 RC 版本,8 月初正式發布 3.0 版本。
  • Vue 3 正式發布 - OSCHINA - 中文開源技術交流社區
    Vue.js 3.0 "One Piece" 已正式發布,此框架新的主要版本提供了更好的性能、更小的捆綁包體積、更好的 TypeScript
  • 官方Element Plus for Vue 3.0 Beta 版本今天發布了!
    今天,Element Plus for Vue 3.0 Beta版本正式發布了!對,就是那個被外界傳言不再維護的Element UI!官方團隊幾乎重寫了每一行 代碼,用最Vue 3的方式呈現了最完美的Element,主要有:使用TypeScript開發,提供完整的類型定義文件使用Vue 3.0 Composition API
  • Vue.js系列之vue-router(上)(3)
    說明:我們項目現在用的是:vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3
  • Vue.js 3.x 源碼解析先導
    聊聊 Vue.js 3.xVue.js 3.x 目前的狀態Vue.js 3.x 目前處於 Pre-Alpha 的狀態,從 Vue 官方的 Roadmap 來看,2019 年 Q3 結束前開源 Vue 3.x 的源碼,Q4 除了繼續完善 Vue.js 核心源碼之外,還要補齊周邊的生態建設:如 vue-router、vuex、vue-cli、Vue Devtools
  • 【項目推薦】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 3 首個 RC 版本發布
    Vue.js 作者尤雨溪昨日宣布 Vue 3 已進入 RC 階段,這意味著 Vue 3 內核的 API 和實現已到達穩定狀態。原則上,進入 RC 階段後不會在最終版本發布之前引入新的主要功能或作出重大更改。
  • Vue.js事件與表單處理
    -- CDN引入最新穩定版 --><script src="https://cdn.jsdelivr.net/npm/vue"></script> <script> const vm = new Vue({ el: '#app', data: { content: '默認內容',
  • 【分享】Vue.js新手入門指南
    Vue.js就是一個用於搭建類似於網頁版知乎這種表單項繁多,且內容需要根據用戶的操作進行修改的網頁版應用。3.單頁應用程式(SPA)顧名思義,單頁應用一般指的就是一個頁面就是應用,當然也可以是一個子應用,比如說知乎的一個頁面就可以視為一個子應用。單頁應用程式中一般交互處理非常多,而且頁面中的內容需要根據用戶的操作動態變化。
  • Vue.js說說組件
    如何追蹤變化:把一個不同對象傳給vue實例作為data的選項,vue.js將遍歷它的屬性,用Object.defineProperty將它轉換為getter/setter。這是ES5特性,所有vue.js不支持IE8或更低版本。    模板中每個指令/數據綁定都有一個對應的watcher對象,在計算過程中它把屬性記錄為依賴。
  • 揭密vue.js的神秘之處,小程序跟vue有什麼關係
    微容用的微信小程序平臺採用開發思路是前後端分離,前端採用vue.js+h5+jq開發,後端採用MVE的思路,用php開發,用vue.js構建來微信小程序可視化前端之後,微容給大家介紹下vue的來源和特徵。
  • Vue.js以業務為中心的常見面試題
    2.觸屏即播放$('html').one('touchstart',function(){ audio.play()})3.阻止旋轉屏幕時自動調整字體大小在vue.js中的MVVM模式:vue.js是通過數據驅動的,vue.js實例化對象將dom和數據進行綁定,一旦綁定,dom和數據將保持同步,每當數據發生變化,dom也會隨著變化;ViewModel是Vue.js的核心,它是Vue.js的一個實例。
  • Vue.js系列之vue-resource(6)
    說明:我們項目現在用的是:vue2.0 + vue-cli + webpack + vue-router2.0 +
  • 「Vue.js開發連載一」Vue.js簡介
    二、Vue能做什麼vue是一個js框架,幫你把DOM操作都綁定到數據操作上,省去了開發者寫操作DOM的代碼,同時給了你一套規範,讓你的代碼更容易維護,可復用性更高,讓開發體驗更好,可以輕鬆做出APP體驗的頁面。
  • Vue.js最佳實踐(五招讓你成為Vue.js大師)
    如果有人需要Vue.js入門系列的文章可以在評論區告訴我,有空就給你們寫。對大部分人來說,掌握Vue.js基本的幾個API後就已經能夠正常地開發前端網站。但如果你想更加高效地使用Vue來開發,成為Vue.js大師,那下面我要傳授的這五招你一定得認真學習一下了。
  • 初步認識vue.js框架的使用
    vue.js框架是幹什麼的Vue.js 是一個JavaScriptMVVM庫,是一套構建用戶界面的漸進式框架。它是以數據驅動和組件化的思想構建的,採用自底向上增量開發的設計。相比於Angular.js,Vue.js提供了更加簡潔、更易於理解的API,使得我們能夠快速地上手並使用Vue.js。如何使用vue.js1.下載 vue.min.js 並用 <script> 標籤引入。
  • vue-antd-admin 0.7.1 已經發布
    vue-antd-admin 0.7.1 已經發布。