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 特性。
其他项目
| 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
本文分享自微信公众号 - 玩转VS Code（vs_code）。
如有侵权，请联系 [email protected] 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。