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实验室(前端开发实验室)获取更多前端热点资讯、技术实践、面试招聘等精彩内容。