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

目前存在部分与[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