VueConf China 2021 《Vue3生态进展-尤雨溪》 Reaction

美味值：🌟🌟🌟🌟🌟

口味：铁锅炖排骨

文章尽量的以图文形式还原尤大的直播内容(为了你有更好的观看体验，欧巴添加了一些相关连接)。还没观看的同窗能够和你们一块儿来一波图文 Reaction，看过的同窗也能够再梳理一遍重点内容，废话少说，让咱们开始吧！

一些数据

上面的数据是截止到今年 4 月份的，与去年同期相比，增加很可观，整个的前端开发市场还在不断扩大。

2020.09.18 发布 Vue 3.0 One Piece

• Vue 3.0

Vue3 发布后官方并无强推全部的用户都升级 Vue3，由于生态须要时间，生态里的工具、周边以及库都须要时间去兼容，Vue3 的一些新用法也须要时间去沉淀。

发布后主要在忙什么？

Vue Router 4.0 已稳定

• github.com/posva

Vuex 4.0 已稳定

• github.com/kiaking

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

Vue Router 和 Vuex 早已是 Vue 框架的一部分，它们的稳定是很是重要的。

Vue 3 生态逐步遇上

社区生态库也在逐步遇上。

• Quasar
• Element Plus
• And Design Vue
• Vuetify
• Nuxt 3

开发体验改进

构建工具 Vite

• Vite 官方中文文档

该知道的都知道了，不知道的慢慢了解。 -- 姜云升

vue-cli 和 Vite 的主要区别在于：vue-cli 基于 webpack 二次开发，vue-cli 涵盖的范畴比较广，维护成本很是高。一些常见的配置变得复杂化了。

Vite 会继承 vue-cli 的优势，选择更简洁的路线，插件机制基于 Rollup 的 API，很是简洁直观。比起 Webpack，Rollup 的插件会好写不少，更加容易理解。

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

Vite or vue-cli ？

现有项目若是与 Webpack 强依赖，可能也没有办法简单的迁移过来。

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

能够理解为把 Vue2 换成了 Vue3，把 Webpack 换成了 Vite，就获得了 VitePress。

上面的第三点，React 的 MDX 也有一样的问题，不过 VitePress 把它解决了。

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

• New script setup (without ref sugar)

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

并且，setup 能够帮助咱们简洁不少代码，提高编码体验。

好比咱们有 Comp.vue 和 App.vue 两个组件。

在 setup 下，App 引入 Comp 组件后能够直接使用，无需注册。

对比一下：

<style> 动态变量注入

• SFC style CSS variable injection (new edition)

点击 make it green 按钮后：

原理也很简单，使用原生 CSS 变量，将动态内容进行绑定，剩下就所有交给浏览器去作，因此运行时开销很是小。是个性价比很高的特性。

Vue Devtools beta channel(6.0)

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

这张图是开发时的截图，有些模糊，不过不要紧。大体咱们能够从图中看出：

性能调试面板能够帮咱们找出哪一个组件渲染特别慢，还有鼠标事件、键盘事件、组件事件、组件重渲染等。

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

更好的 IDE/TS 支持

Volar 是将来官方主推的 VS Code 插件，将会替代 Vetur(历史包袱)。

如上图，Volar 提供了几乎和 TSX 同样的开发体验，能够进行模板类型检查。

IDE 支持计划

将来会将 Vetur 的一些重要的功能以及一些新的探索整合到 Volar 上。

同时 Volar 的做者还开发了 vue-tsc，在 CI 上支持能够同时检查 TS 文件以及 Vue 文件里的 TS 类型错误，内部的实现适合 Volar 同样的。

固然，也会和其余的编辑器进行官方合做，提供支持。

再也不支持 IE11

微软刚刚发布声明，IE11 将在 2022 年 6 月 retire，可见其推进 IE 用户改用 Edge 的决心。

• Proposal for dropping ie11 support in Vue 3
• Drop IE11 support plan for Vue 3

Vue3 + Vite = Modern by Default

Vue3 migration build

近期另外一个重大发布，总体的内容比较大，预计在 3.1 发布。

Vue3 升级版：底子里是 Vue3，上层兼容 Vue2 的行为。大部分的功能均可以彻底支持。

能够选择将整个应用能够跑在 Vue2 模式下，再将某几个单独的组件跑在 Vue3 模式下。

也能够反过来，整个应用跑在 Vue3 模式下，再将几个旧的 Vue2 组件移植过来，再慢慢的更改为 Vue3 的模式。

尽量的给你们提供了兼容的灵活性。

目前文档在vue-compat仓库里。public API 会尽量的兼容，可是一些私有 API 确实没有办法彻底兼容。文档中有详细的支持列表。

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

3.2

由于上面的兼容版移到了 3.1，因此原有的 3.1 内容将会移到 3.2，不过预计也会很快发布，具体的细节会在发布时披露。

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

预计在 Q3 2021 去作。

但愿在 Q3 Vue2.7 发布以后，整个的 Vue2 到 Vue3 的升级过程会变得更加顺滑。能够先基于 Vite 切换到 Vue2.7，Compsition API 会直接内置，再切换到 Vue3 会更加简单。

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

将会在 2021 年 6 月底，将 npm 默认安装指向 Vue3，文档也会默认指向 Vue3 的文档，但愿新的用户会以 Vue3 做为基准。

本文已收录在前端食堂同名仓库 Github github.com/Geekhyt，欢迎光临食堂，若是以为酒菜还算可口，赏个 Star 对食堂老板来讲是莫大的鼓励。

❤️爱心三连击

1.若是你以为食堂酒菜还合胃口，就点个赞支持下吧，你的赞是我最大的动力。

2.关注公众号前端食堂，吃好每一顿饭！

3.点赞、评论、转发 === 催更！