查看原文
其他

Vue 3拖更,尤雨溪介绍最新进展

前端大全 2021-01-15

The following article is from 开源中国 Author 局长

(给前端大全加星标,提升前端技能

转自:开源中国

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 特性。

其他项目

ProjectStatus
vue-devtoolsWIP (beta channel with Vue 3 support in early July)
eslint-plugin-vue7.0.0-alpha.9 [Github]
@vue/test-utils2.0.0-alpha.7 [Github]
vue-class-component8.0.0-alpha.6 [Github]
vue-loader16.0.0-beta.4 [Github]
rollup-plugin-vue6.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



- EOF -




推荐阅读  点击标题可跳转

1、1.1万字从零解读Vue3.0源码响应式系统

2、尤雨溪:重头来过的 Vue 3 带来了什么?

3、Vue3中 router 带来了哪些变化?


觉得本文对你有帮助?请分享给更多人

关注「前端大全」加星标,提升前端技能

好文章,我在看❤️

    您可能也对以下帖子感兴趣

    文章有问题?点此查看未经处理的缓存