Vue.js 作者尤雨溪近日介紹了 Vue 3 的最新進展。
尤雨溪表示，由於在 Vue 3 上花費的大部分時間都投入到了設計和構建穩定的內核上，不過要讓整個框架處於"ready"狀態，不僅僅是內核的問題，還需要有兼容版本的支持庫 （Vue Router, Vuex, test utils）、工具（CLI、eslint 插件、瀏覽器開發工具擴展、IDE 擴展）和文檔（包括針對新用戶和用於遷移的文檔）。將所有這些內容整合在一起需要協調許多方面的工作。
他希望專注於編寫出好的軟件，而不是趕工期。因此原本計劃2020年上半年發佈 Vue 3，但考慮到目前的進度，不得不進行調整。現在的計劃是7月中旬發佈 RC 版本，8月初正式發佈 3.0 版本。
Vue 3 主要部分的進展
Vue 3 Core
Vue 3 core 已經處於 beta 階段兩個多月，目前已合併所有計劃中的重大更改 RFC，並且在正式發佈之前不會進行進一步的重大變更。可以認爲 Vue 3 core 已到達穩定狀態，併爲 RC 版本做好了準備。
Vue Router
目前存在部分與[email protected]相關的路由鉤子(router hook)行爲一致性問題，這也是 Vue Router 沒有被標記爲 Beta 的原因。不過在非關鍵項目上可以使用新的路由。
Vuex
Vuex 4.0 和 3.x 之間的唯一區別是它與 Vue 3 兼容，目前已準備好和 Vue 3 Core 一起進入 RC 階段。
Vue CLI
Vue CLI 中的 Vue 3 支持目前通過 vue-cli-plugin-vue-next 插件提供。可以先通過腳手架構建一個新項目，然後運行vue add vue-next來切換到 Vue 3。Vue 3 進入 RC 階段後會成爲項目創建過程中的一個選項。
要注意的是，如果對 webpack 和 IE11 沒有特別要求的支持，也可以使用 Vite 啓動 Vue 3 項目。
JSX Support
當前有兩種針對 Vue 3 的 JSX 轉換實現，其語法略有不同（針對 Vue 的特定功能）：
目前正在通過此 issue 收集意見以統一設計，並制定一個官方規範，說明如何在 JSX 中處理 Vue 特性。
其他項目
| Project | Status |
|---|---|
| vue-devtools | WIP (beta channel with Vue 3 support in early July) |
| eslint-plugin-vue | 7.0.0-alpha.9 [Github] |
| @vue/test-utils | 2.0.0-alpha.7 [Github] |
| vue-class-component | 8.0.0-alpha.6 [Github] |
| vue-loader | 16.0.0-beta.4 [Github] |
| rollup-plugin-vue | 6.0.0-beta.6 [Github] |
當然，如果希望嘗試 Vue 3，目前的狀態也已經滿足。因爲框架的大多數部分組件都處於 beta 或 alpha 狀態，而內核也已經進行了廣泛的測試，沒有發佈 RC 的唯一原因是是瀏覽器開發工具擴展(browser devtool extensions)尚未完成。可參考下面的決策樹來對採用 Vue 3 進行相應的評估：
IWantVue3()
async function IWantVue3() {
await read(`https://github.com/vuejs/rfcs/pulls?q=is%3Apr+is%3Amerged+label%3Acore+-label%3Arevoked+-label%3A2.6+sort%3Acomments-desc`)
if (isTrue("I just want to play with Vue 3"))) {
// If you just want to try Vue 3 out - you can do it right now with Vite.
// Vite (https://github.com/vitejs/vite) is a new dev/build tool that we
// created that is lighter, faster and produces smaller bundles. It works
// with Vue 3 out of the box.
run(`npm init vite-app hello-vue3`)
return
}
if (isTrue("I am planning to use Vue 3 for a new project")) {
if (isTrue("I need IE11 support")) {
await IE11CompatBuild() // July 2020
}
if (isTrue("RFCs are too dense, I need an easy-to-read guide")) {
await migrationGuide() // July 2020
}
if (isTrue("I'd rather wait until it's really ready") {
await finalRelease() // Targeting early August 2020
})
run(`npm init vite-app hello-vue3`)
return
}
if (isTrue("I am planning to upgrade an existing Vue 2 project")) {
await IE11CompatBuild()
await migrationGuide()
await ecosystem(
// this is the tricky part: if you have an existing, non-trivial Vue 2
// app, you likely are using some dependencies that are not yet
// Vue-3-compatible, for example meta frameworks like Nuxt, or UI
// component libraries like Vuetify. If that's the case, our suggestion
// is don't be in a hurry to upgrade. It *will* take some time for the
// ecosystem to catch up.
// Also note that you can start using Vue Composition API in Vue 2 today
// via https://github.com/vuejs/composition-api - we are also going to be
// backporting compatible Vue 3 features to 2.x once 3.0 is out.
)
return
}
if (isTrue("I am the author of a Vue ecosystem library")) {
// It's time to make your lib Vue 3 compatible!
return
}
}