大家好,这里是大家的林语冰,您现在收看的是 2023 年第 45 周 Vue 官方的技术周报。
免责声明
本文属于是语冰的直男翻译了属于是,仅供粉丝参考,视频解说请临幸 人猫神话@bilibili,英文原味版请临幸 Weekly Vue News。
Vue 技术栈
Vue 模式:诉诸 Vue 3 组合式 API 进行响应式父子通信
在本文中,您将探讨使用 Vue 3 响应式 API 来创建响应式父子通信。

在这篇综合文章中,您将开始深入探讨内存泄漏。
Nuxt 技术栈

"Layer(图层)是更高级别的结构,可以帮助我们隔离 Nuxt 的可复用部分,比如 Nuxt 页面、布局、组件、组合式函数等。"

感谢 Nuxt 服务器路由的强大功能,创建我们页面的站点地图易如反掌。
Nuxt 3.8:诉诸 getCachedData 进行客户端缓存
了解 getCachedData 的作用,何时适用,并实现自己的缓存。
Daniel Roe 解释了 Nuxt 团队如何构建一个 TS 优先的框架,该框架与用户的 IDE 深度集成。
多人活动
2023 年 11 月 9-10 日,加拿大多伦多
完整流程请临幸 http://vuetoronto.com/schedule
2024 年 2 月 28-29 日,阿姆斯特丹
挨踢圣经
程序员的"成人礼"在于 ------ 当你意识到你一顿操作的代码毫无卵用时,你愿意果断白给及时止损。

Nuxt Tip:如何修复"Nuxt 实例不可用"的错误
如果您使用的是 Nuxt 3,您可能已经遭遇"Nuxt 实例不可用"错误。这是什么错误,以及解决方法是什么?
什么是"Nuxt Instance Unavailable"错误?
您可能在中间件或插件中收到了此错误,祂们将 async/await
代码包裹在 try/catch
区块中。举个栗子:

发生该错误的原因是编译器丢失了 try/catch
区块中的 Nuxt 上下文。Nuxt 3 内部使用 unjs/unctx
使诸如 navigateTo()
等组合式函数能够奏效,而无需直接将 nuxtApp
传递给祂们。
不幸的是,自动恢复上下文的 unjs/unctx 转换遇到包含 await
的 try/catch
语句会产生 bug。这是 Nuxt 3.7 的一个已知问题,且希望在未来的更新中得到修复。
如何修正错误?
解决方案是诉诸 runWithContext
方法:

如果您不得不在项目中使用此方法,请尝试创建一个复制品并给 Nuxt 团队打小报告。这有助于框架团队在框架层级解决此问题。
延伸阅读
临幸官方文档,了解上下文的更深入解释。
前端梗图

周边资讯

本文介绍了若干使用谷歌风格指南的整洁 TS 代码示例。
前端技术栈巨复杂,因为祂没有统一的导入系统、层级转译,有一大坨可用的工具,并且频繁出现"配置地狱"的问题。
"Angular 之父兼 Qwik 之父":JS 框架如何处理响应性

"Angular 之父兼 Qwik 之父"强调了 JS 框架和响应性中启动性能的重要性,这赋能了动态响应式 app。

本文将整体式前端分解为更小、更易于管理的部分,并使用图表来表演在此类架构中状态管理的工作方式。
包括但不限于:
- 构建设计系统
- 采用组件筑基的架构
- 减少工具类的数量
- 更多细节请临幸官网......
一个用于编辑和生成分层盒子阴影代码的在线工具。
您现在收看的是 Vue 官方周报,学废了的小伙伴可以点赞友情赞助本系列,我们每周三佛系投稿,欢迎关注和订阅最新动态。谢谢大家的彼芯,掰掰~