大家好,这里是大家的林语冰,您现在收看的是 2023 年第 39 周 Vue 官方的技术周报。
免责声明
本文属于是语冰的直男翻译了属于是,仅供粉丝参考,视频解说请临幸 Vue 官方周报@bilibili,英文原味版请临幸 Weekly Vue News。
Vue 技术栈
Mozilla 表示:"在这一年中,Firefox(火狐浏览器)在 Vue 基准测试优化了约 40%" ------ 图穷匕见。
当测试从 Vue 2 升级到 Vue 3 时,Firefox 中存在若干性能问题。问题的根源是 Vue 3 引入了 Proxy 对象。Proxy 很难优化,因为它们在设计上是通用的,Firefox 对它们进行了优化,使其完全在 JIT(即时编译)中执行,避免冗余工作,这显著优化了 Vue 的响应速度。

本文解释了使用组合式 API 和 script setup
的 Vue 3 组件的主要成分。
Vue 3 进展迅猛且基本成熟,组合式 API 和
script setup
是编写 Vue 组件强烈推荐的语法糖。这与选项式 API 不同,选项式 API 是 Vue 2 的首选方法。

构建表单并不容易,但 FormKit 可以为您提供帮助。
这是一个表单构建框架,其中所有表单逻辑均由 FormKit 提供。
FormKit 不仅仅是一个 UI 库。它是一个面向 Vue 爱好者的综合表单构建框架,更快、更易于访问、更好的 DX 和 UX,以及更少的代码来创作高质量的生产就绪表单,比如输入、验证规则和提交/错误处理。

Vue School 发布了 Pinia 实用指南。
它包含所有这些学习资源,帮助您成为 Pinia 专家。
Vue 大学作为 Vue 生态最大的学习中心,包含了 Pinia 相关的丰富学习资源,可帮助您提升状态管理技能,包括但不限于 HMR(热模块替换)、Pinia 插件等高级主题。
Vue 教程:从初学者到前端开发者
4 小时的综合课程将教您开始使用 Vue 3 构建 App 所需的基本概念。
Nuxt 技术栈
Daniel Roe - Nuxt, unJS
Daniel Roe 的播客,讲述它从法律转行设计再转行开发的旅程,以及它最终如何领导 Nuxt 核心团队。
Wut's Nuxt for Nuxt.js?
Alexander Lichter 的播客,它谈论 Nuxt 是什么、Nuxt 如何帮助开发者、围绕服务端渲染的对话、它与 PHP 有何不同,以及 Nuxt 令人鸡冻的地方。
如何使用新的 View Transitions API 在 Nuxt 中创建漂亮的视图过渡

View Transitions API 是对新推出的 Web API 的绝佳补充。
Web Transitions API 是一个新的 API,它为我们提供了一种更好的方法来创建不同 DOM 状态之间的动画转换。在 SPA 中手动执行此操作需要编写大量 CSS 和 JS。Nuxt 是第一个提供了对应的实验性功能的框架。借助新的 API,您可以更轻松地在 App 状态之间创建 amazing 的转换,更易于访问且优化性能。
Novuel 是一款使用 Nuxt 3、Nuxt UI 和 Novel Vue 构建的开源 AI 写作 App。
挨踢圣经
如果 debug 是移除软件 bug 的过程,那么撸码就是制造 bug 的过程。

Vue 小技巧:数组深层侦听
在 Vue 3 中,当使用 watch 选项 来侦听数组时,回调能且仅能在数组被替换时触发。换而言之,数组变更时不会触发 watch
的回调。
举个栗子:

我们有一个用户数组和一个添加新用户的按钮。当我们点击按钮时,用户被添加到数组中,但不会触发 watch
的回调。
要在变更时触发侦听器,必须指定 deep
选项:

现在,当我们单击按钮时,将触发 watch
的回调并将新用户打印到控制台。
前端梗图
Svelte + Solid = Vue

周边资讯

制作有效提示是一门(有时令人沮丧的)艺术。
了解更多获得预期输出的技巧。
本文介绍了静态分析工具以及静态分析代码耐久性方面的福利。
静态分析有助于防止诸如空指针取消引用、无限循环、正则错误、次优代码、资源泄漏等问题。不同的语言有不同的静态分析工具人,比如 Python 有 Pylint,ES6 有 ESLint 等。静态分析可以帮助新手纠正错误,辅助团队开发等。

越来越火的涡轮增压站点生成器。
您可以将它与 React、Vue、Svelte、Solid 等一起使用。
Astro 3.0 是第一个支持 View Transitions API 的主要 Web 框架。可以轻松地在页面导航中淡入淡出、滑动、变形。直到最近,这只能在 JS SPA 中实现。
开发者的瑞士军刀。
DevToys 帮助完成日常开发任务,比如 JSON 格式化、文本比较和正则测试。
RecipeUI 是一个内置类型安全的开源 Postman 替代品。
它可以帮助您使用 TS 捕获 API 请求并在失败之前自动完成。
友情赞助

您现在收看的是 Vue 官方周报,学废了的小伙伴可以订阅专栏合集,我们每周三佛系投稿,欢迎持续关注前端生态。谢谢大家的点赞,掰掰~