Vue 3 最新進展

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

目前存在部分與vue-router@3.x相關的路由鉤子(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 特性。

其他專案

當然，如果希望嘗試 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