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 Nationvuejsnation.com
  2. Day 1vueschool.io/articles/ne...
  3. Day 2vueschool.io/articles/ne...

粉丝互动

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

欢迎持续关注"前端俱乐部",给前端以福利,给编程以复利。

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

相关推荐
逐·風3 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫3 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦4 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子4 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享5 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果5 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄6 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
凉辰7 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
清灵xmf7 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询