给前端以福利,给编程以复利。大家好,我是大家的林语冰。
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 的关键步骤:
- 设置 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 :vuejsnation.com
- Day 1 :vueschool.io/articles/ne...
- Day 2 :vueschool.io/articles/ne...
粉丝互动
本期话题是:你最喜欢哪一场演讲,有没有什么收获?你可以在本文下方自由言论,文明科普。
欢迎持续关注"前端俱乐部",给前端以福利,给编程以复利。
坚持阅读的小伙伴可以给自己点赞!谢谢大家的点赞,掰掰~