回顾 VueConf 2021,Vue3 的生态现在到底怎么样了?(附视频录播资源)

2023-06-18 0 501

回顾 VueConf 2021,Vue3 的生态现在到底怎么样了?(附视频录播资源)

许多统计数据

回顾 VueConf 2021,Vue3 的生态现在到底怎么样了?(附视频录播资源)回顾 VueConf 2021,Vue3 的生态现在到底怎么样了?(附视频录播资源)

下面的统计数据是止到去年 4 月末的,与去年同比减少,快速增长很丰厚,整座的前端开发消费市场还在不断增加。

2020.09.18 正式发布 Vue 3.0 One Piece

回顾 VueConf 2021,Vue3 的生态现在到底怎么样了?(附视频录播资源)Vue 3.0[1]

Vue3 正式发布后非官方并没G360A大部份的使用者都升级换代 Vue3,即使自然生态须要天数,自然生态里的辅助工具、邻近和库都须要天数去相容,Vue3 的许多新用语也须要天数去结晶。

正式发布后主要就在忙甚么?

回顾 VueConf 2021,Vue3 的生态现在到底怎么样了?(附视频录播资源)

Vue Router 4.0 已平衡

回顾 VueConf 2021,Vue3 的生态现在到底怎么样了?(附视频录播资源)github.com/posva[2]

Vuex 4.0 已平衡

回顾 VueConf 2021,Vue3 的生态现在到底怎么样了?(附视频录播资源)github.com/kiaking[3]

(这位新加入的老哥,讲道理,豹纹有点帅。)

Vue Router 和 Vuex 早已经是 Vue 框架的一部分,它们的平衡是非常重要的。

Vue 3 自然生态逐步赶上

回顾 VueConf 2021,Vue3 的生态现在到底怎么样了?(附视频录播资源)

社区自然生态库也在逐步赶上。

Quasar[4]Element Plus[5]And Design Vue[6]Vuetify[7]Nuxt 3[8]

开发体验改进

回顾 VueConf 2021,Vue3 的生态现在到底怎么样了?(附视频录播资源)

构建辅助工具 Vite

回顾 VueConf 2021,Vue3 的生态现在到底怎么样了?(附视频录播资源)Vite 非官方中文文档[9]

该知道的都知道了,不知道的慢慢了解。– 姜云升

回顾 VueConf 2021,Vue3 的生态现在到底怎么样了?(附视频录播资源)

vue-cli 和 Vite 的主要就区别在于:vue-cli 基于 webpack 二次开发,vue-cli 涵盖的范畴比较广,维护成本非常高。许多常见的配置变得复杂化了。

Vite 会继承 vue-cli 的优点,选择更简洁的路线,插件机制基于 Rollup 的 API,非常简洁直观。比起 Webpack,Rollup 的插件会好写很多,更加容易理解。

Vite 插件还可以支持定制开发服务器、middleware 和对热更新的行为做细致的调整。

Vite or vue-cli ?

回顾 VueConf 2021,Vue3 的生态现在到底怎么样了?(附视频录播资源)

现有项目如果与 Webpack 强依赖,可能也没办法简单的迁移过来。

VitePress 基于 Vue3 + Vite 的静态站生成器

回顾 VueConf 2021,Vue3 的生态现在到底怎么样了?(附视频录播资源)

可以理解为把 Vue2 换成了 Vue3,把 Webpack 换成了 Vite,就得到了 VitePress。

回顾 VueConf 2021,Vue3 的生态现在到底怎么样了?(附视频录播资源)

下面的第三点,React 的 MDX 也有同样的问题,不过 VitePress 把它解决了。

更多单文件组件编译阶段的优化

回顾 VueConf 2021,Vue3 的生态现在到底怎么样了?(附视频录播资源)回顾 VueConf 2021,Vue3 的生态现在到底怎么样了?(附视频录播资源)New script setup (without ref sugar)[10]

只要你的 script 标签带了 setup 属性,那么你声明的变量就可以直接在模板里使用。

回顾 VueConf 2021,Vue3 的生态现在到底怎么样了?(附视频录播资源)

而且,setup 可以帮助我们简洁很多代码,提升编码体验。

比如我们有 Comp.vue 和 App.vue 两个组件。

在 setup 下,App 引入 Comp 组件后可以直接使用,无需注册。

回顾 VueConf 2021,Vue3 的生态现在到底怎么样了?(附视频录播资源)回顾 VueConf 2021,Vue3 的生态现在到底怎么样了?(附视频录播资源)

对比一下:

回顾 VueConf 2021,Vue3 的生态现在到底怎么样了?(附视频录播资源)

<style> 动态变量注入

SFC style CSS variable injection (new edition)[11]回顾 VueConf 2021,Vue3 的生态现在到底怎么样了?(附视频录播资源)回顾 VueConf 2021,Vue3 的生态现在到底怎么样了?(附视频录播资源)

点击 make it green 按钮后:

回顾 VueConf 2021,Vue3 的生态现在到底怎么样了?(附视频录播资源)

原理也很简单,使用原生 CSS 变量,将动态内容进行绑定,剩下就全部交给浏览器去做,所以运行时开销非常小。是个性价比很高的特性。

回顾 VueConf 2021,Vue3 的生态现在到底怎么样了?(附视频录播资源)

Vue Devtools beta channel(6.0)

回顾 VueConf 2021,Vue3 的生态现在到底怎么样了?(附视频录播资源)

不用在 Vue Devtools 两个版本之间来回切换了,新的 Vue Devtools 同时支持 Vue2/3。

回顾 VueConf 2021,Vue3 的生态现在到底怎么样了?(附视频录播资源)

这张图是开发时的截图,有些模糊,不过没关系。大致我们可以从图中看出:

性能调试面板可以帮我们找出哪个组件渲染特别慢,还有鼠标事件、键盘事件、组件事件、组件重渲染等。

最关键的是这个 Timeline 支持第三方插件对其进行扩展。

更好的 IDE/TS 支持

回顾 VueConf 2021,Vue3 的生态现在到底怎么样了?(附视频录播资源)

Volar[12] 是未来非官方主推的 VS Code 插件,将会替代 Vetur(历史包袱)。

如上图,Volar 提供了几乎和 TSX 一样的开发体验,可以进行模板类型检查。

IDE 支持计划

回顾 VueConf 2021,Vue3 的生态现在到底怎么样了?(附视频录播资源)

未来会将 Vetur 的许多重要的功能和许多新的探索整合到 Volar 上。

同时 Volar 的作者还开发了 vue-tsc,在 CI 上支持可以同时检查 TS 文件和 Vue 文件里的 TS 类型错误,内部的实现适合 Volar 一样的。

当然,也会和其他的编辑器进行非官方合作,提供支持。

不再支持 IE11

回顾 VueConf 2021,Vue3 的生态现在到底怎么样了?(附视频录播资源)

微软刚刚正式发布声明,IE11 将在 2022 年 6 月 retire,可见其推动 IE 使用者改用 Edge 的决心。

Proposal for dropping ie11 support in Vue 3[13]Drop IE11 support plan for Vue 3[14]

Vue3 + Vite = Modern by Default

回顾 VueConf 2021,Vue3 的生态现在到底怎么样了?(附视频录播资源)

Vue3 migration build

回顾 VueConf 2021,Vue3 的生态现在到底怎么样了?(附视频录播资源)

近期另一个重大正式发布,整体的内容比较大,预计在 3.1 正式发布。

Vue3 升级换代版:底子里是 Vue3,上层相容 Vue2 的行为。大部分的功能都可以完全支持。

可以选择将整座应用可以跑在 Vue2 模式下,再将某几个单独的组件跑在 Vue3 模式下。

也可以反过来,整座应用跑在 Vue3 模式下,再将几个旧的 Vue2 组件移植过来,再慢慢的更改成 Vue3 的模式。

尽可能的给大家提供了相容的灵活性。

目前文档在vue-compat[15]仓库里。public API 会尽可能的相容,但是许多私有 API 确实没办法完全相容。文档中有详细的支持列表。

并提供了详尽的 step by step 的流程vue-hackernews-2.0[16]

3.2

回顾 VueConf 2021,Vue3 的生态现在到底怎么样了?(附视频录播资源)

即使下面的兼容版移到了 3.1,所以原有的 3.1 内容将会移到 3.2,不过预计也会很快正式发布,具体的细节会在正式发布时披露。

绝对须要 IE11 支持的话 请等待 2.7

回顾 VueConf 2021,Vue3 的生态现在到底怎么样了?(附视频录播资源)

预计在 Q3 2021 去做。

回顾 VueConf 2021,Vue3 的生态现在到底怎么样了?(附视频录播资源)

希望在 Q3 Vue2.7 正式发布之后,整座的 Vue2 到 Vue3 的升级换代过程会变得更加顺滑。可以先基于 Vite 切换到 Vue2.7,Compsition API 会直接内置,再切换到 Vue3 会更加简单。

Vue3 成为默认版本 by end of Q2 2021

回顾 VueConf 2021,Vue3 的生态现在到底怎么样了?(附视频录播资源)

将会在 2021 年 6 月底,将 npm 默认安装指向 Vue3,文档也会默认指向 Vue3 的文档,希望新的使用者会以 Vue3 作为基准。

回顾 VueConf 2021,Vue3 的生态现在到底怎么样了?(附视频录播资源)T

参考资料

[1]

Vue 3.0: https://github.com/vuejs/vue-next/releases/tag/v3.0.0

[2]

github.com/posva:https://github.com/posva

[3]

github.com/kiaking: https://github.com/kiaking

[4]

Quasar: https://github.com/quasarframework/quasar

[5]

Element Plus: https://github.com/element-plus/element-plus

[6]

And Design Vue: https://github.com/vueComponent/ant-design-vue

[7]

Vuetify: https://github.com/vuetifyjs/vuetify

[8]

Nuxt 3: https://github.com/nuxt/nuxt.js

[9]

Vite 非官方中文文档: https://cn.vitejs.dev/

[10]

New script setup (without ref sugar) :https://github.com/vuejs/rfcs/pull/227

[11]

SFC style CSS variable injection (new edition):https://github.com/vuejs/rfcs/pull/231

[12]

Volar: https://github.com/johnsoncodehk/volar

[13]

Proposal for dropping ie11 support in Vue 3: https://github.com/vuejs/rfcs/discussions/296#discussioncomment-707086

[14]

Drop IE11 support plan for Vue 3: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0038-vue3-ie11-support.md

[15]

vue-compat: https://github.com/vuejs/vue-next/tree/master/packages/vue-compat

[16]

vue-hackernews-2.0: https://github.com/vuejs/vue-hackernews-2.0/compare/migration

[17]

github.com/Geekhyt: https://github.com/Geekhyt/front-end-canteen

创作不易,请各位给加个星标点赞、在看 支持哦!

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务