過完年，大年初七，Vue3 將成為默認版本，這時感覺我之前寫的幾篇文章都可以抽空更新一版了。

尤雨溪推薦神器 ni ，能替代 npm/yarn/pnpm ？簡單好用！源碼揭秘！

Vue 3.2 發布了，那尤雨溪是怎么發布 Vue.js 的？

Vue 團隊公開快如閃電的全新腳手架工具，未來將替代 Vue-CLI，才300余行代碼，學它！

初學者也能看懂的 Vue3 源碼中那些實用的基礎工具函數

這些文章都在源碼共讀中，歡迎大家點此加我微信 ruochuan12 參與學習。

---

本文作者：尤雨溪
發布時間：2022-01-20
原文鏈接：https://zhuanlan.zhihu.com/p/460055155（可點擊閱讀原文查看）

---

劃重點：Vue 3 將在 2022 年 2 月 7 日成為新的默認版本！

請務必閱讀可能需要采取的措施^[1]部分，來確認你是否需要在默認版本切換之前做相應改動以避免發生異常。

本文章開放授權，在注明原文地址，內容不做修改的前提下可以隨意轉載。

Markdown 源文件^[2] | 英文原文^[3]

---

1從庫到框架

在最開始的時候，Vue 僅僅是一個運行時庫。但這些年來，它已經逐步發展成了一個包含許多子項目的框架：

• 核心庫，即 vue npm 包

• 內容足夠當作一本書的文檔

• 構建工具鏈（Vue CLI、Vue Loader 和其他支持包）

• 用于構建單頁應用的路由 Vue Router

• 用于狀態管理的 Vuex

• 用于調試和分析的瀏覽器開發者工具擴展

• 用于支持開發單文件組件的 VSCode 擴展 Vetur

• 用于進行靜態風格/錯誤檢查的 ESLint 插件

• 用于組件測試的 Vue Test Utils

• 利用 Vue 運行時功能的定制 JSX Babel 插件

• 用于靜態網站生成的 VuePress

正因為 Vue 是一個社區驅動的項目，才讓這一切成為可能。這些項目中的許多都是由社區成員發起，他們后來成為了 Vue 團隊的成員。其余的項目最初由我發起，但現在除了核心庫之外，幾乎都完全由團隊維護。

2Vue 3 的 “軟發布”

隨著核心庫發布新的大版本，框架的所有其他部分也需要一起同步更新。我們還需要為 Vue 2 用戶提供一個升級方案。對于 Vue 這樣一個社區驅動的團隊來說，這是一個巨大的工程。在 Vue 3 的核心庫完成的時候，框架的其他部分要么還在 beta 狀態，要么還沒有開始適配 Vue 3。當時我們的決定是先發布核心庫，這樣早期用戶可以先用起來，庫和上層框架的開發者也可以先適配起來，而我們則繼續更新框架的其余部分。

在這個過程中，我們依然將 Vue 2 保留為文檔和 npm 安裝時的默認版本。這是因為我們知道對于大部分用戶來說，在 Vue 3 的其余部分完善以前，Vue 2 仍然提供了更一致且完整的體驗。

3嶄新的 Vue

“軟發布” 的過程比預期要長，但這個時刻終于到了：我們很高興地宣布，Vue 3 將在 2022 年 2 月 7 日成為新的默認版本。

除了 Vue 核心庫以外，我們還幾乎改進了框架的每個方面。

• 基于 Vite^[4] 的極速構建工具鏈

• <script setup> 帶來的開發體驗更絲滑的組合式 API 語法

• Volar^[5] 提供的單文件組件 TypeScript IDE 支持

• vue-tsc^[6] 提供的針對單文件組件的命令行類型檢查和生成

• Pinia^[7] 提供的更簡潔的狀態管理

• 新的開發者工具擴展，同時支持 Vue 2/Vue 3，并且提供一個插件系統^[8]來允許社區庫自行擴展開發者工具面板。

我們還徹底重寫了主文檔。全新的 vuejs.org^[9] (目前處于待發布狀態，中文版^[10]的翻譯還在進行中) 將提供最新的框架概述與開發建議、針對不同背景的用戶的靈活的學習路徑，在整個指南與示例中都能夠在選項式 API 和組合式 API 之間進行切換，以及許多新的深入章節。新文檔本身的網站性能也非常優秀——我們將在不久后的另一篇博文中詳細探討一下。

4版本切換細節

下面是我們所說的“新的默認版本”的具體細節。此外，請閱讀可能需要采取的措施^[11]部分，來確認你是否需要在默認版本切換之前做相應改動以避免發生異常。

npm 發布標簽

• npm install vue 將默認安裝 Vue 3。

• 所有其他官方 npm 包的 latest 發布標簽將指向其 Vue 3 的兼容版本，包括 vue-router、vuex、vue-loader 和 @vue/test-utils。

官方文檔與站點

所有的文檔和官方站點將默認切換到 Vue 3 版本。包括：

• vuejs.org

• router.vuejs.org

• vuex.vuejs.org

• vue-test-utils.vuejs.org (將遷移到 test-utils.vuejs.org)

• template-explorer.vuejs.org

請注意，新的 vuejs.org 將是完全重寫的版本^[12]，而不是目前部署在 v3.vuejs.org 的版本。

這些站點當前的 Vue 2 版本將被遷移到新地址 (版本前綴表示庫的各自版本，而非 Vue 核心庫的版本)：

• vuejs.org -> v2.vuejs.org (舊的 v2 網址將自動重定向到新地址上)

• router.vuejs.org -> v3.router.vuejs.org

• vuex.vuejs.org -> v3.vuex.vuejs.org

• vue-test-utils.vuejs.org -> v1.test-utils.vuejs.org

• template-explorer.vuejs.org -> v2.template-explorer.vuejs.org

GitHub 倉庫

在寫這篇文章時，倉庫相關的變化已經生效了。

vuejs 組織下的所有 GitHub 倉庫將把默認分支切換到 Vue 3 對應的版本。此外，以下倉庫都將被重命名，以刪除其名稱中的 next：

• vuejs/vue-next -> `vuejs/core`^[13]

• vuejs/vue-router-next -> `vuejs/router`^[14]

• vuejs/docs-next -> `vuejs/docs`^[15]

• vuejs/vue-test-utils-next -> `vuejs/test-utils`^[16]

• vuejs/jsx-next -> `vuejs/babel-plugin-jsx`^[17]

此外，主文檔的翻譯倉庫將被移至 `vuejs-translations` 組織^[18]下。

GitHub 會自動處理倉庫的重定向，所以之前的源碼與 issue 問題的鏈接應該仍然有效。

開發者工具擴展

開發者工具 v6 目前是發布到 Chrome Web Store 的 beta 頻道^[19]下的，在版本切換后，將移至穩定頻道^[20]。

目前的穩定頻道仍然可用。它將被遷移到遺留頻道^[21]。

5可能需要采取的措施 {#potential-required-actions}

使用未指定版本的 CDN 鏈接

如果你通過 CDN 鏈接使用 Vue 2 而沒有指定版本，請確保通過 @2 來指定一個版本范圍：

-?<script?src="https://unpkg.com/vue"></script>
+?<script?src="https://unpkg.com/vue@2"></script>-?<script?src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
+?<script?src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.min.js"></script>

注意：即使使用 Vue 3，你也應該始終在生產環境指定一個版本范圍，以避免意外地加載到未來的大版本。

npm latest 標簽

如果你使用 latest 標簽或 * 來從 npm 安裝 Vue 或其他官方庫，請更新為明確使用兼容 Vue 2 的版本：

{"dependencies":?{
-???"vue":?"latest",
+???"vue":?"^2.6.14",
-???"vue-router":?"latest",
+???"vue-router":?"^3.5.3",
-???"vuex":?"latest"
+???"vuex":?"^3.6.2"},"devDependencies":?{
-???"vue-loader":?"latest",
+???"vue-loader":?"^15.9.8",
-???"@vue/test-utils":?"latest"
+???"@vue/test-utils":?"^1.3.0"}
}

參考資料點擊閱讀原文