【译】Vue 官方周报：Pinia之父布道！React组件库Vue化移植。同步调用组合式函数。（2023 年第 41 周）
大家好，这里是大家的林语冰，您现在收看的是 2023 年第 41 周 Vue 官方的技术周报。
免责声明
本文属于是语冰的直男翻译了属于是，仅供粉丝参考，视频解说请临幸 人猫神话@bilibili，英文原味版请临幸 Weekly Vue News。
Vue 技术栈
在本文中，您将探讨可复用组件的概念、应用它们时面临的问题，以及尽可能克服它们至关重要的原因。
玩弄 Pinia 的 5 大顶级技巧，本文作者是爱德华多·圣马丁·莫罗特（Eduardo San Martin Morote），即“Pinia 之父”。
粉丝福利
UP 主已翻译了此博客，直男翻译版请临幸 玩弄 Pinia 的 5 大顶级技巧。
诉诸 Intersection Observer 构建特殊的 Vue 3 无限滚动器
本文介绍了构建 Vue 3 单页组件的过程，该组件封装了 Intersection Observer API，使其在我们的 Vue app 中信手拈来。
社区主导的面向 React 的 “shadcn/ui” 组件库的 Vue 移植。
一套使用 Tailwind CSS 和 Radix UI 构建的漂亮组件，您可以轻松地将其“复制并粘贴”到您的 app 中。
为您的 Vue 3 或 Nuxt 3 项目选择合适的 UI 库。
Nuxt 技术栈
“useFetch 是一个组合式函数，应该在 setup 方法的上下文中调用。它提供了一种触发 fetch 调用的方法。”
多人活动
2023 年 11 月 9-10日，加拿大多伦多。
热评圣经
“软件乃艺术与工程的完美结合。”
Vue 奇技淫巧：同步使用组合式函数
您应该始终在 setup() hook 或 <script setup> 中同步调用您的组合式函数。当您调用组合式函数时，最好不要使用 await 或 Promise.all()。举个栗子，不建议使用像以下代码一样使用 setup() 钩子（hook）：
Vue 必须知道当前激活的组件实例才能注册生命周期钩子、watcher 和计算属性。如果您异步调用您的组合式函数，Vue 将无法确定当前的激活组件实例，也无法注册这些功能。
<script setup> 是使用 await 后调用组合式函数的唯一位置。异步操作后，编译器会自动为您还原激活实例上下文。
当且仅当在
<script setup>中使用await后您才能调用组合式函数。异步操作后，编译器会自动为您还原激活实例上下文。
友情建议
我建议您始终在 setup() 钩子和 <script setup> 调用组合式函数。有时，您可以在生命周期钩子中调用祂们，比如 onMounted()。这将确保您的组合式函数永远在正确的上下文中被调用，并且 Vue 可以注册所有必要的功能。
一个很好的例子是 useFetch 组合式函数从 API 中获取数据：
您可以在 setup() 钩子或 <script setup> 中同步调用此组合式函数：
异步编程与组合式 API 是 Anthony Fu 大佬创作的一篇很棒的文章，祂更详细地科普了这个话题。
周边资讯
本文科普了异步代码的 14 条 ESLint 规则，比如为嵌套回调设置限制，防止日后调试头大。
本文科普了一种系统化调试方法，该方法关注点在于理解优先。
JS 的自然语言日期解析器。
它旨在处理大多数日期/时间格式并从任何给定文本中提取信息。
查找比 package.json 允许的更新版本的模块依赖。
它将 package.json 的依赖升级到最新版本，而忽略指定版本。
您现在收看的是 Vue 官方周报，学废了的小伙伴可以点赞友情赞助本系列，我们礼拜天佛系拖更，欢迎关注和订阅最新动态。谢谢大家的彼芯，掰掰~
转载自:https://juejin.cn/post/7294468438392160307