尤大在线问答，2024 Vue 联邦大会重点回顾！2024 Vue 联邦大会（Vue Nation）已经完美落幕！一起来

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

00. 观前须知

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

今年的大会绝对令人喵瞪狗呆，充满了前沿的演讲、研讨会和公告，展示了 Vue 的最新进展、突破性见解和元气满满的社区精神。

让我们一起来回顾 2024 Vue 联邦大会第一天的精彩演讲。

免责声明

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

01. “Vue 之父”在线问答

“Vue 之父”尤雨溪（Evan You）在在线问答中科普了 Vue 相关的各种主题，包括 Vue 2 的终结、Vue 3 的未来、Vite 以及社区对 Vue 的误解。

以下是若干要点：

• Vue 2 已经终止开源维护的生命周期，但仍需要 Vue 2 的公司可以选择付费支持方案。
• Vite 5 没有任何提高性能的特定功能，但 Vite 已经与特定框架解耦，因此它可以从其他框架的性能改进中受益。
• 在近未来，Vue 核心没有计划新的宏，但如果存在明确的需求，Vue 团队愿意添加它们。
• Vue Vapor 模式（蒸汽模式）仍在开发中，但已经可以使用它来构建基本组件。
• 关于 Vue 的某些常见误解包括但不限于：
  • 误会 Vue 只适用于简单开发
  • 误会 Vue 对 TS 的支持差强人意
  • 误会 Vue 不能与其他框架“梦幻联动”
• 尤大认为，AI 尚未准备好生成完全可用于生产的应用程序，但 AI 可以成为开发者的僚机，或回答常见问题的有用工具。

02. 5 种更好的组件模式

掌握 Nuxt 3 的首席讲师 Michael 介绍了 Vue 中五种更好的组件模式，科普了每种模式的优缺点，以及使用它们的最佳时机。

这五种模式包括但不限于：

1. 数据存储模式：此模式用于管理 Vue 应用中的全局状态。它有助于避免 prop 逐级透传和事件冒泡，这使得组件难以维护。
2. 隐藏组件模式：此模式用于将大型组件分解为更小、更易于管理的组件。这使得组件更容易理解和测试。
3. 保留对象模式：此模式用于决定是否将整个对象传递给组件或单独的 prop。一般而言，最好传递单独的 prop，除非有充分的理由不这样做。
4. 列表组件模式：此模式用于创建渲染项目列表的组件。这使得组件更易复用和维护。
5. 提取组件模式：此模式有助于将 v-if 的所有条件提取到其自己的组件中。

03. 探索 TinyMCE：从开源到 Vue 集成的 ChatGPT AI 助手

TinyMCE 产品经理 Fredrik 介绍了 TinyMCE，这是一个与 Vue 集成的富文本编辑器。

Fredrik 简介了 TinyMCE 及其功能，包括但不限于：

• 与 Vue 集成：TinyMCE 可以使用 vue-tinymce-editor 包轻松与 Vue 应用集成。
• 开源和高级功能：TinyMCE 是开源的，但它还提供了高级功能，例如可访问性检查器和 AI 助手插件。
• 可访问性：TinyMCE 致力于可访问性，并包含可供残障人士使用的功能。
• AI 助手插件：AI 助手插件利用 OpenAI 的 ChatGPT 提供文本格式、内容等建议。
• 其他功能：TinyMCE 还提供其他功能，如表格编辑、图像嵌入和视频嵌入。

总体而言，TinyMCE 是一个功能强大且丰富的富文本编辑器，对于 Vue 开发者而言是一个宝藏资源。

04. 从零开始构建 Nuxt 3 应用

Nuxt 团队的团队负责人 Daniel 将引导我们完成使用 Nuxt 3，从零开始​​构建菜谱应用的过程。

关键步骤如下所示：

1. 设置项目：第一步是使用 npx create-nuxt-app <project-name> 创建一个新的 Nuxt 项目。然后，安装必要的依赖。
2. 创建 API 端点：在 api 目录中创建名为 recipes.ts 的文件。使用 fetch 函数对调用 Spoonaulous API，并检索食谱。将 API 密钥设置为环境变量。
3. 定义配方架构：使用 zod 库定义菜谱数据的结构，包括但不限于标题、成分、说明和图像 URL 等属性。
4. 使用 Nuxt UI 组件：安装 @vueui/components 包使用 Nuxt UI 组件，使用 NuxtImage 组件展示菜谱图像。
5. 创建菜谱卡：利用 Nuxt UI 组件为菜谱创建卡片布局，展示菜谱标题、成分、说明和图像。
6. 添加功能：实现搜索功能，允许用户搜索食谱。添加分页展示更多食谱，使用户能够保存它们最喜欢的食谱。
7. 部署应用程序：将项目推送到 Vercel 等托管平台，并为 API 密钥设置环境变量。

05. Quasar：一个代码库，一切平台！

Quasar 核心团队成员 Luke 科普了构建一个可导出到 Capacitor、Electron 和浏览器扩展的 Quasar 应用。他进一步介绍了创建蓝牙应用的过程，该应用可以扫描设备并连接到它们，并通过实时编码会话演示如何使用浏览器扩展将代码注入页面。

以下是其演讲要点：

• Quasar 是一个框架，允许你使用一个代码库为多个平台构建应用。
• Capacitor 是一个插件，允许你使用网络技术构建原生移动应用。
• Electron 是一个允许你使用 Web 技术构建桌面应用的框架。
• 浏览器扩展是可以为你的网络浏览器添加功能的小程序。

06. Pinia 重灾区

“Pinia 兼 VUeRouter 之父”Eduardo 介绍了使用 Vue 应用状态管理库 Pinia 的常见错误。Eduardo 回顾了亲眼所见的某些常见陷阱，并提供了如何避坑的提示。

以下是其演讲要点：

• 将旧模式映射到 Pinia：社区经常在 Pinia 中试用旧版 Vuex 状态管理库的同款模式。虽然但是，Pinia 的设计与 Vuex 一龙一猪，这些模式并非总是效果拔群。举个栗子，在 Pinia 中，你可以直接修改状态，而无需创建单独的 getter 和 setter 函数。
• 外部化状态：可以在 Pinia 中外部化状态，可以做但没必要。这可能会破坏 SSR（服务端渲染）等功能。
• 读取状态：在 Pinia 中，你可以直接使用 store 对象读取状态。我们不需要仅仅为了读取状态而创建单独的 getter 函数。
• 滥用 store：很容易向 store 添加过多信息。某些东东是全局的并不意味着它需要设置在 store 里面。
• 工厂模式：你可以将工厂模式与 store一起使用，但这并不总是必要的。这取决于你的应用的复杂性，以及你构建代码的方式。
• 单向数据流：直接访问状态不会破坏单向数据流。事实上，它通常比使用 getter 和 setter 更方便。

参考文献

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

粉丝互动

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

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

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