Deno fmt 比 prettier 快 20 倍！Nuxt 3.10 版本正式发布！Chrome 122 新增几个API！
今天是坚持日更的第152天，如果本文对您有帮助，记得点击关注、点赞、在看支持我
Deno fmt 比 prettier 快 20 倍!
与 Node.js 不同，Deno 不仅仅是 JavaScript/TypeScript 应用程序的运行时。Deno 除了主要运行应用程序外，它还是一个完整的工具链，包含 REPL、linter、formatter、tester、cover coverage、bundler 等大量对开发人员友好的工具。
Deno 内置的格式化工具很早以前就已推出。最初，它只是一个简单的代码格式化工具。最近，Deno 的内置 formatter 进行了更新，支持了更多自定义功能。
在最新的一次测试中，官推反馈了测试结论：**deno fmt 比 prettier 快 20 倍**。
Nuxt 3.10 正式发布
Nuxt 3.10 正式发布，其中包含大量功能和修复，主要更新特性如下：
✨ 预渲染时试验性共享 asyncData
在预渲染路由时，我们可能会一遍又一遍地重新获取相同的数据。在 Nuxt 2 中，我们可以创建一个 "payload"，它可以被获取一次，然后在每个页面中访问（当然，在 Nuxt 3 中也可以手动实现这一点）。有了这个特性后，现在可以在预渲染网站时自动为您实现这一点。您的 useAsyncData 和 useFetch 调用将在网站渲染之间进行重复和缓存。
// nuxt.config.ts
export defineNuxtConfig({
experimental: {
sharedPrerenderData: true
}
})
🆔 创建 SSR 安全的可访问唯一ID
现在，Nuxt 提供了用于生成 SSR 安全唯一 ID 的 useId 可组合文件。这样就可以在应用程序中创建更多可访问的接口。例如：
<script setup>
const emailId = useId()
const passwordId = useId()
</script>
<template>
<form>
<label :for="emailId">Email</label>
<input
:id="emailId"
name="email"
type="email"
>
<label :for="passwordId">Password</label>
<input
:id="passwordId"
name="password"
type="password"
>
</form>
</template>
✍️ 扩展 app/router.options
模块作者现在可以注入自己的路由器选项文件。新的 pages:routerOptions 钩子允许模块作者添加自定义滚动行为（scrollBehavior）或路由的运行时增强。
客户端 Node.js 支持
我们现在支持（实验性地）对 Node.js 内置关键功能进行兼容，就像我们在部署到非 Node 环境时通过服务器上的 Nitro 所做的一样。这意味着，在客户端代码中，你可以直接从 Node 内置导入（支持 node: 和 node 导入）。但是，并没有为您全局注入任何内容，以避免不必要地增加捆绑包大小。您可以在需要的地方导入它们。
import { Buffer } from 'node:buffer'
import process from 'node:process'
或者自己提供polyfill，例如在 Nuxt 插件中。
import { Buffer } from 'node:buffer'
import process from 'node:process'
globalThis.Buffer = Buffer
globalThis.process = process
export default defineNuxtPlugin({})
🍪 更好的 Cookie 响应性
现在，我们允许您选择使用 CookieStore。如果浏览器支持，将使用 CookieStore 而不是 BroadcastChannel，在更新 cookie 时以响应方式更新 useCookie 值。
这还配备了一个新的组合函数 refreshCookie，可用于手动刷新 cookie 值，例如在执行请求后。
🏥 检测反模式
在此版本中，我们还提供了一系列用于检测潜在错误和性能问题的功能。
如果在服务器上使用 setInterval，我们将抛出错误。 警告（仅在开发环境中）是否错误使用数据获取组合函数，例如在插件或设置上下文之外使用。 警告（仅在开发环境中）如果您不使用 <NuxtPage/>但启用了 vue-router 集成。（<RouterView/>不应单独使用。）
🧂 细粒度视图转换支持
现在可以使用 definePageMeta 在每个页面上基于页面控制视图转换支持。首先，您需要启用实验性视图转换支持：
export default defineNuxtConfig({
experimental: {
viewTransition: true
},
app: {
// you can disable them globally if necessary (they are enabled by default)
viewTransition: false
}
})
然后，您可以选择加入/退出：
<!-- pages/index.vue -->
<script setup lang="ts">
definePageMeta({
viewTransition: false
})
</script>
最后，如果用户的浏览器匹配 prefers-reduced-motion: reduce，Nuxt 将不应用视图转换。您可以设置 viewTransition: 'always'；然后由您决定是否尊重用户的偏好。
🏗️ 编译时路由元数据
现在可以在构建时访问在 definePageMeta 中定义的路由元数据，允许模块和钩子修改和更改这些值。
// nuxt.config.ts
export default defineNuxtConfig({
experimental: {
scanPageMeta: true
}
})
请尝试并告诉我们它对您的工作效果如何。我们希望在未来的版本中改进性能并默认启用此功能，以便 @nuxtjs/i18n 等模块可以与在 definePageMeta 中设置的路由选项提供更深入的集成。
✅ 快速升级
使用 nuxi upgrade --force 快速升级。
Chrome 122 新增几个API
Set 相关方法的提案已经进入 TC39 第三阶段，相关方法将在 Chrome 122 版本中被得到支持。
Set.prototype.intersection(other)
Set.prototype.union(other)
Set.prototype.difference(other)
Set.prototype.symmetricDifference(other)
Set.prototype.isSubsetOf(other)
Set.prototype.isSupersetOf(other)
Set.prototype.isDisjointFrom(other)
这些方法都要求它们的参数是一个集合，或者至少看起来像一个集合，因为它有一个数字大小属性以及 keys 和 has 方法。
其他
Prisma ORM 5.9.0 正式发布
Prisma 是一个基于 Nodejs 和 TypeScript 的 ORM，它可以帮助开发者以更快的开发速度和更少的错误来管理数据库。
Prisma ORM 是下一代 ORM，凭借其直观的数据模型、自动迁移、类型安全和自动完成功能，Prisma 将开发人员在使用数据库时的体验提升到了一个新的水平。
Prisma ORM 5.9.0 稳定版本，主要亮点为优化结果集，提高查询效率，通过引入 JOIN 提高关系查询的性能，支持部署到边缘函数。
Fastify v4.26.0 正式发布
Fastify v4.26.0 正式发布，它是一个比 Express，Koa 框架更完善，也没有 NestJS 这种需要学习一大堆 java中的概念才能上手，我的yiapi https://github.com/chenbimo/yicode 就是基于此框架打造而成。
Fastify v4.26.0 正式发布，它是一个 Web 开发框架，其设计灵感来自 Hapi 和 Express，致力于以最少的开销和强大的插件结构提供最佳的开发体验。据我们所知，它是这个领域里速度最快的 web 框架之一。拥有高性能、可扩展、日志友好、对开发人员友好、支持 TypeScript 等众多特性。
它是一个兼顾简单与强大，适合前端往全栈发展的 Node.js 框架。
关注FED实验室(前端开发实验室)获取更多前端热点资讯、技术实践、面试招聘等精彩内容。