尤雨溪表示,由於在 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 的特定功能):
vueComponent/jsx
HcySunYang/vue-next-jsx
目前正在通過此 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
}
}
詳情查看 https://github.com/vuejs/rfcs/issues/183