⚡️ Vue 3.3 发布
Vue 3.3 已发布,包含许多激动人心的功能,特别是在类型支持方面。
- 新的
defineOptions
宏 - “泛型”组件
- 类型化插槽以及在 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 服务器传递到客户端的有效负载中序列化复杂对象(以及在为预渲染站点提取有效负载数据时)。
这意味着各种丰富的 JS 类型现已开箱即用地得到支持:正则表达式、日期、Map 和 Set 以及 BigInt,以及 NuxtError - 以及 Vue 特定的对象,如 ref
、reactive
、shallowRef
和 shallowReactive
。
您可以在我们的测试套件中找到 一个示例。
这都要归功于 Rich-Harris/devalue#58。长期以来,Nuxt 一直使用我们自己的 devalue 分支,因为存在序列化错误和其他非 POJO 对象的问题,但我们现在已切换回原始版本。
您甚至可以使用新的对象语法 Nuxt 插件注册您自己的自定义类型。
export default definePayloadPlugin(() => {
definePayloadReducer('BlinkingText', data => data === '<original-blink>' && '_')
definePayloadReviver('BlinkingText', () => '<revivified-blink>')
})
您可以 在此处 了解更多关于其工作原理的信息。
🛝 交互式服务器组件
此功能应视为高度实验性,但由于 @huang-julien 的出色工作,我们现在通过插槽支持服务器组件中的交互式内容 (#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
}
})
🔎 “捆绑器”模块解析
我们现在在 Nuxt 中完全支持 模块解析 的 bundler
策略。
如果可能,我们建议采用此策略。它对子路径导出具有类型支持,例如,但比 Node16
解析更精确地匹配 Vite 和 Nuxt 等构建工具的行为。
export default defineNuxtConfig({
typescript: {
tsConfig: {
compilerOptions: {
moduleResolution: 'bundler'
}
}
}
})
这开启了 TypeScript “跟随” Node 子路径导出的功能。例如,如果库具有一个子路径导出,如 mylib/path
,它映射到 mylib/dist/path.mjs
,则可以从 mylib/dist/path.d.ts
中提取此类型的类型,而无需库作者创建 mylib/path.d.ts
。
⚗️ 分离的服务器类型
我们计划提高您在 IDE 中对应用程序的“nitro”和“vue”部分之间的清晰度,我们已通过为您的 ~/server
目录 (#20559) 生成单独的 tsconfig.json
来交付此功能的第一部分。
您可以通过添加包含以下内容的附加 ~/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 上的完整发布说明。