给前端以福利，给编程以复利。大家好，我是大家的林语冰。
00. 观前须知
2024 Vue 联邦大会（Vue Nation）已经完美落幕！
今年的大会给 Vue 爱好者提供了丰富的干货，从与 Vue 核心团队的现场问答，到有关 Vue 中的高级功能、组件构建和常见陷阱的启发性演讲。
本期一起来回顾 2024 Vue 联邦大会第二天的精彩演讲。
免责声明
本文属于是语冰的直男翻译了属于是，略有删改，仅供粉丝参考。英文原味版请传送 。
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 的关键步骤：
- 设置 TS config：该过程首先创建一个
tsconfig.json文件，并将其配置为与 Nuxt 3“梦幻联动”。 - 迁移服务和辅助程序：下一步涉及迁移独立文件，例如不影响应用程序其他部分的服务和辅助程序。
- 迁移 Nuxt 插件和中间件：迁移服务和辅助程序后，重点将转移到迁移 Nuxt 插件和中间件。
- 迁移组件：该过程中最复杂的是将组件迁移到 TS。这涉及将组件逻辑转换为 TS，并使用类型注解来定义
props和组件状态的数据类型。 - 迁移
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 等正确工具，以及采用条件渲染来增强性能。
参考文献
- Vue Nation：
- Day 1：
- Day 2：
粉丝互动
本期话题是：你最喜欢哪一场演讲，有没有什么收获？你可以在本文下方自由言论，文明科普。
欢迎持续关注“前端俱乐部”，给前端以福利，给编程以复利。
坚持阅读的小伙伴可以给自己点赞！谢谢大家的点赞，掰掰~