2024 Vue 联邦大会完美谢幕，我偷偷学到了什么？

给前端以福利，给编程以复利。大家好，我是大家的林语冰。

00. 观前须知

2024 Vue 联邦大会（Vue Nation）已经完美落幕！

今年的大会给 Vue 爱好者提供了丰富的干货，从与 Vue 核心团队的现场问答，到有关 Vue 中的高级功能、组件构建和常见陷阱的启发性演讲。

本期一起来回顾 2024 Vue 联邦大会第二天的精彩演讲。

免责声明

本文属于是语冰的直男翻译了属于是，略有删改，仅供粉丝参考。英文原味版请传送 Vue.js Nation 2024 Day 2 Recap。

01. Vue 核心团队现场问答

现场直播从“Pinia 兼 Vue Router 之父”Eduardo 组成的 Vue 核心团队的问答环节开始。

Vue 团队成员回答了有关对 Vue 的贡献、首选的测试实践、Vue 的未来等问题。

以下是若干要点：

• 对 Vue 的贡献：
  • Eduardo 的开源贡献始于 Meteor 和 Vue 之间的集成。
  • Guillaume 在创建 Vue 选项式 API 方面发光发热。
• 测试实践：
  • Eduardo 更青睐使用 Jest 和 Vue Test Utils 进行单元测试，Cypress 或 Playwright 进行端到端测试。
  • Guillaume 也偏爱 Jest 和 Vue Test Utils，但更喜欢使用 Nightwatch 进行端到端测试。
• Vue 的未来：
  • 没有计划弃用选项式 API。
  • Vue 团队正在考虑 TS 的新增支持。
  • 短期内不会计划推出 Vue 全新主版本 Vue 4，但团队将在必要时进行破坏性更改。

02. 2024 Vuetify 的未来规划

“Vuetify 之父”John 科普了 2024 规划的三个次版本。第一个版本 Nebula 关注升级布局系统并引入新组件。第二个版本 Odyssey 关注表单更新。第三个版本 Andromeda 关注提供突出应用程序中的新功能，并为用户提供导航指南。

以下若干亮点：

• Nebula（星云，2024-04）
  • 升级布局系统以利用 Vue 的 Suspense 功能
  • 五个新组件
• Odyssey（奥德赛，2024 第二季度）
  • 六个关注改善表单体验的新组件
• Andromeda（仙女座，2024 第四季度）
  • V 工具提示组件：提供更多信息的工具提示。
  • V 视频组件：功能齐全的视频播放器。
  • Vuetify Studio：一款新产品，允许你从简单界面配置整个应用。

除了未来规划之外，John 还爆料了 Vuetify 团队正在研究可访问性和提高 Vue 最新版本的采用率。

03. 如何使用 Vue + TresJS 创建 3D 体验

“TresJS 之父”Saburido 科普了如何使用 Vue + TresJS 创建 3D 体验。他首先共享了他对 3D 图形的热情，并科普了他开发的自定义渲染 API TresJS。

TresJS 使开发者能够使用组件和组合式函数在 Vue 中构建 3D 场景，无需深度学习复杂的 3D 概念即可创建身临其境的 3D 体验。

Saburido 表演了使用 TresJS 构建 3D 场景的过程。最后，Saburido 对 TresJS 在简化网络 3D 体验创建方面的潜力表示鸡冻。他还爆料了亟待解决的挑战，例如性能和兼容性。

04. 下一代 UI 组件库：PrimeVue

“PrimeVue 之父”Civici 科普了 PrimeVue，这是一个开源且免费的下一代 Vue UI 组件库。

以下是若干要点：

• PrimeVue 的独特之处在于采用了与其他库不同的样式方案。你可以根据喜好设计组件样式，而不必受限于库提供的样式。
• PrimeVue 易于访问，遵循 WCAG 2.2 规范，且使用了语义化 HTML。
• PrimeVue 拥有许多高级功能，包括数据表、日历等。
• 对于寻求可定制、可访问的 Vue UI 组件库的开发者而言，PrimeVue 是不错的选择。

05. 将 Nuxt/Vue 应用迁移到 TS

“Push Brand 之父”Millan 科普了他将 Nuxt 应用迁移到 TS 的经验和挑战。

Millan 强调，缺乏综合资源是迁移过程中最大的挑战之一。尽管官方的 Nuxt 迁移指南是一个关键起步，但并没有详细介绍 TS 迁移，导致 Millan 依赖百度一下和 GitHub issues 来寻求解决方案。

Millan 科普了将 Nuxt/Vue 应用迁移到 TS 的关键步骤：

1. 设置 TS config：该过程首先创建一个 tsconfig.json 文件，并将其配置为与 Nuxt 3“梦幻联动”。
2. 迁移服务和辅助程序：下一步涉及迁移独立文件，例如不影响应用程序其他部分的服务和辅助程序。
3. 迁移 Nuxt 插件和中间件：迁移服务和辅助程序后，重点将转移到迁移 Nuxt 插件和中间件。
4. 迁移组件：该过程中最复杂的是将组件迁移到 TS。这涉及将组件逻辑转换为 TS，并使用类型注解来定义 props 和组件状态的数据类型。
5. 迁移 store：迁移 store 的策略取决于使用的是 Vuex 还是 Pinia。对于 Vuex，需要将 store 移动到不同的文件夹，且需要在应用中手动创建 Vuex 初始化。对于 Pinia，store 可以直接迁移到 TS。

Millan 建议采用逐步迁移的方案，而不是一次迁移所有内容，以免不堪重负。

06. Vue 的重灾区以及如何避坑

Vue 大学（Vue School）的首席讲师 Daniel 科普了使用 Vue 时遭遇的常见陷阱，并共享了如何避坑的建议。

第一个坑涉及使用 index 作为 v-for 循环中的 key 属性，当数组元素的顺序更改、或嵌套元素拥有其自己的状态时，这会导致错误。Daniel 建议为数组中的每个元素使用唯一 id 作为 key，从而避免这些问题。

另一个常见误区在于 key 属性的使用，即假设 key 只适用于 v-for。Daniel 澄清说，key 属性可以用在任何需要唯一 id 元素的场景中。举个栗子，他建议在使用 Vue 的 useInterval 函数的计数器上使用 key，跟踪计数器递增的次数。

Daniel 还强调直接改变 prop 是一个常见误区，这违背了 Vue 的 prop 的只读原则。他建议禁止直接修改 prop，而是拷贝 prop，然后修改其副本。

此外，Daniel 还科普了若干避免 Vue 常见错误的通用技巧，例如确保使用 ESLint 和 Vue devtools 等正确工具，以及采用条件渲染来增强性能。

参考文献

1. Vue Nation：vuejsnation.com
2. Day 1：vueschool.io/articles/ne…
3. Day 2：vueschool.io/articles/ne…

粉丝互动

本期话题是：你最喜欢哪一场演讲，有没有什么收获？你可以在本文下方自由言论，文明科普。

欢迎持续关注“前端俱乐部”，给前端以福利，给编程以复利。

坚持阅读的小伙伴可以给自己点赞！谢谢大家的点赞，掰掰~