Vue 周报：Oxlint对ESLint降维打击！尤雨溪的反思。Vitest官宣升级（51期）

大家好，这里是大家的林语冰，您现在收看的是第 51 期《Vue 技术周报》。

视频解说请传送 Vue 技术周报@bilibili。

每周必看

尤大的忏悔：Vue 3 启示录

“Vue 之父”尤雨溪在多伦多的 Vue 大会上告诉与会者，在将 Vue 2 升级到 Vue 3 中，它吸取了某些惨痛教训。

这位大佬科普了尤雨溪在本次演讲中的若干细节，共享了开源库作者在升级框架时的若干教训和启示，比如 Vue 2 升级到 Vue 3 时，Vue 团队应该及时和 Vue 生态的大型项目（比如 Nuxt 和 Vuetify）的作者共享信息。

Oxlint 对 ESLint 降维打击

老粉都知道，尤雨溪在 Vite 大会的演讲中就爆料了 Vite 的前端基建 Rollup 将使用 Rust 锈化重构为 Rolldown，其依赖一大神器就是号称目前地表速度最快的 JS 解析器 —— Oxc。

Oxc 团队官宣 Oxlint 正式发布，将来或许可以作为 ESLint 的替代品，性能直接对 ESLint “降维打击”，测评跑分比 ESLint 快 50-100 倍。

举个栗子，Shopify 是类似于淘宝天猫的跨境电商，Shopify 团队打小报告，原本用 ESLint 要跑一个多小时的代码集成，现在集成 Oxlint 只要 10 秒钟。

尤大亲自测评，Oxlint 跑大约 600 个文件只需 50 毫秒，重新运行只需 30 毫秒。最后尤大评价道，“性能爆表！”

Vue 爱好者

（译）Vue 并行请求优化

LCP（最大内容绘制）和 FCP（首次内容绘制）这两个关键性能指标对于出色的 UX（用户体验）跑分至关重要。

这位大佬科普了如何在 Vue 中结合生命周期钩子并行请求，实现组件 JS 文件和数据请求并行，减少网页的加载时间，优化性能瓶颈。

（译）Vue 3 缓存清除

浏览器缓存是一种强大的优化技术，用于优化 Web App 的性能。虽然但是，如果服务器对内容进行了更新，那么可能会导致用户查看过时的内容。

这位大佬科普了如何诉诸 HandleCache 组件来清除缓存，Vue 可以通过清除缓存提供无缝且最新的 UX，这可以基于缓存的文件版本控制或内容哈希实现，但需要注意缓存更新频率和动态内容。

跨框架动画库

AutoAnimate 是一个零配置、开箱即用的动画工具库，可以为您的 Web App 添加平滑的过渡，实现动画甚至只需一行代码。

这是一个框架无关的 JS 动画库，所以您可以让它与 Vue/React 等 JS 框架梦幻联动。

Vue 图表库

Chart.js 是一个为设计师和开发者提供简单灵活 JS 图表的工具库。

而 vue-chartjs 则是基于 Vue 对 Chart.js 进行封装，您可以使用它轻松创建可复用的 Vue 图表组件。

Nuxt 爱好者

迁移到 Nuxt 3 的七大福利

SPA 开发领域 Vue 2 已经升级到 Vue 3，SSR 领域 Nuxt 2 也升级到了 Nuxt 3。

这位大佬科普了旧版项目从 Nuxt 2 迁移到 Nuxt 3 的七大福利，包括但不限于：

1. 性能优化
2. 更好的 DX（开发者体验）
3. 引入 Vue 3 的组合式 API

Vite 爱好者

（译）Vitest@1.0 官宣升级

Vitest 是一个原生支持 Vite 的测试框架，连人气爆棚的 Vue 都悄咪咪将其测试库替换为 Vitest，还好 up 主有在暗中观察。

Vitest 团队官宣 1.0 正式发布，具体可以参考 up 主翻译的官方升级公告，以及官方文档的迁移指南。

如果您对单元测试感兴趣，可以自学 up 主之前发布的 TDD（测试驱动开发）入门教程，收藏率高达 10%。

程序员名言

此乃“图灵奖”获得者托尼·霍尔的名言，大家应该笔试过它发明的“快排算法”。

大意是，软件架构设计有两大思路：

• 其一是，使其精简到明显没有缺陷；
• 其二则是，使其复杂到没有明显的缺陷。

程序员笑话

麻麻问我问什么笑得那么开心？

但我无力吐槽 404。

Vue 小技巧：定义键盘快捷键的组合式函数

我想向您表演一个便捷的 Vue 组合式函数，它允许您在 App 中定义键盘快捷键。我在 Nuxt UI 中发现了它，它被称为 defineShortcuts。

如何使用它

让我先演示一下如何使用它。您可以在 setup 函数中定义快捷方式，如下所示：

我不想重复文档，但让我强调几点：

• 快捷方式可与 _ 字符组合。举个栗子，meta_k 是元键（在 MacOS 上为 Command 键，在其他操作系统上为 Control）键和 k 键。
• usingInput 是一个标志，告诉组合式函数当且仅当用户未在输入字段中输入时才触发快捷方式。
• whenever 用于添加约束，当且仅当满足约束时才触发快捷方式。举个栗子，您可以使用 whenever: [isActive]，当且仅当 isActive 为 true 时才触发快捷方式。

您现在收看的是《Vue 技术周报》系列，学废了的小伙伴可以订阅专栏合集，我们每周五佛系投稿，欢迎持续关注 Vue 开源技术。谢谢大家的点赞，掰掰~

原文链接：https://juejin.cn/post/7314587257956941874 作者：人猫神话