⚡️ Vue 3.3 发布
Vue 3.3 已发布,带来了许多令人兴奋的功能,特别是类型支持方面的功能。
- 新的
defineOptions
宏 - 'generic' 组件
- 带类型的插槽和在
defineProps
中使用外部类型 - ... 还有更多
这也带来了一个显著的改进,即在导航嵌套页面之间获取数据时(#20777),感谢 @antfu 和 @baiwusanyu-c。
阅读 完整的发布公告 以了解更多详情。
🙌 Nitropack v2.4
我们一直在对 Nitro 进行大量改进,这些改进已经在 Nitro v2.4 中实现 - 你可能已经进行了这次升级,其中包含了许多错误修复、对 Cloudflare 的模块工作器格式更新、Vercel KV 支持等等。
一个注意事项:如果你正在部署到 Vercel 或 Netlify,并且希望从增量静态再生中受益,现在应该更新你的路由规则:
routeRules: {
-- '/blog/**': { swr: 3000 },
++ '/blog/**': { isr: 3000 },
}
阅读 完整的发布说明。
💖 丰富的 JSON 数据载荷
默认情况下启用丰富的 JSON 数据载荷序列化(#19205, #20770)。 这不仅更快,还允许将复杂对象序列化为从 Nuxt 服务器传递给客户端的载荷(以及为预渲染站点提取载荷数据时)。
这现在意味着各种丰富的 JavaScript 类型被开箱即用支持:正则表达式、日期、Map 和 Set,以及 BigInt,还有诸如 ref
、reactive
、shallowRef
和 shallowReactive
等 Vue 特定对象。
你可以在我们的测试套件中找到 一个示例。
所有这些得益于 Rich-Harris/devalue#58。长期以来,Nuxt 一直在使用我们自己的 devalue 分支,因为无法序列化错误和其他非 POJO 对象,但现在我们已经回到了原始版本。
你甚至可以使用新的对象语法 Nuxt 插件注册自定义类型:
export default definePayloadPlugin(() => {
definePayloadReducer('BlinkingText', data => data === '<original-blink>' && '_')
definePayloadReviver('BlinkingText', () => '<revivified-blink>')
})
你可以在这里阅读更多关于它的工作原理。
🛝 交互式服务器组件
这个功能应被视为高度实验性的,但感谢 @huang-julien 的杰出工作,我们现在支持通过 slots 在服务器组件中进行交互式内容的展示(#20284)。
你可以在 #19772 上关注服务器组件的路线图。
⏰ 环境配置
现在你可以在你的 nuxt.config
中配置完全带类型的每个环境覆盖:
export default defineNuxtConfig({
$production: {
routeRules: {
'/**': { isr: true }
}
},
$development: {
//
}
})
如果你正在编写层,你还可以使用 $meta
键提供你或你的层的消费者可能使用的元数据。
阅读更多关于每个环境覆盖的内容。
💪 完全带类型的页面
通过与 unplugin-vue-router 的实验性集成,你可以在 Nuxt 应用中充分受益于带类型的路由 - 这得益于 @posva 的杰出工作!
开箱即用地,这将使得 navigateTo
、<NuxtLink>
、router.push()
等具有类型支持。
你甚至可以通过使用 const route = useRoute('route-name')
在页面中获取带类型的参数。
直接在你的 nuxt.config
中启用此功能:
export default defineNuxtConfig({
experimental: {
typedPages: true
}
})
🔎 'Bundler' 模块解析
现在 Nuxt 完全支持 模块解析 的 bundler
策略。
如果可能的话,我们建议采用这种策略。它对子路径导出提供了类型支持,例如,但与 Node16
解析相比,更准确地匹配了 Vite 和 Nuxt 等构建工具的行为。
export default defineNuxtConfig({
typescript: {
tsConfig: {
compilerOptions: {
moduleResolution: 'bundler'
}
}
}
})
这样就启用了 TypeScript 的 'follow' Node 子路径导出的能力。例如,如果一个库有一个子路径导出 mylib/path
,它被映射到 mylib/dist/path.mjs
,那么对于此导出的类型可以从 mylib/dist/path.d.ts
中引入,而不需要库的作者创建 mylib/path.d.ts
。
⚗️ 分离的服务器类型
我们计划通过为 ~/server
目录生成单独的 tsconfig.json
来提高 IDE 中 "nitro" 部分和 "vue" 部分之间的清晰度(#20559)。
你可以通过添加一个额外的 ~/server/tsconfig.json
文件来使用,内容如下:
{
"extends": "../.nuxt/tsconfig.server.json"
}
尽管目前这些值在类型检查(nuxi typecheck
)时不会被考虑,但你的 IDE 应该会得到更好的类型提示。
💀 废弃
尽管我们没有为 Nuxt 2 中的 build.extend
钩子进行类型化或文档化,但我们一直在 webpack 构建器中调用它。我们现在明确将其标记为废弃,并将在未来的小版本中删除。
✅ 升级
像往常一样,我们建议运行:
npx nuxi upgrade --force
这将刷新你的 lockfile,并确保你拉取 Nuxt 依赖的其他依赖项的更新,特别是在 unjs 生态系统中。
📃 完整的变更日志
阅读完整的发布说明,请访问 https://github.com/nuxt/nuxt/releases/tag/v3.5.0