Svelte 5

主题

常见问题 ​

关于 Svelte 5 ​

Svelte 5 稳定吗？能用于生产吗？ ​

可以。Svelte 5 已于 2024 年 10 月正式发布（GA），本教程使用的 5.57 是其后的稳定版本，已被大量生产项目采用。官方也提供了完善的迁移工具。

Runes 是必须的吗？旧代码还能用吗？ ​

不是强制的。Svelte 5 保留了 legacy mode，旧的 export let、$: 等写法仍能工作，且能与 Runes 共存。但官方推荐新项目直接使用 Runes —— 它更清晰、更强大、可复用。

Svelte 和 SvelteKit 是什么关系？ ​

  • Svelte 是 UI 框架/编译器（本教程的主角）
  • SvelteKit 是构建在 Svelte 之上的全栈应用框架（提供路由、SSR、数据加载、部署适配器等）

学 Svelte 是基础，做完整应用时通常用 SvelteKit。

关于 Runes 使用 ​

$state 和 $derived 该用哪个？ ​

  • 需要存储并会被修改的值 → $state
  • 从别的值计算出来、只读的值 → $derived

判断标准：这个值会不会被直接赋值？会 → $state；由其他值推导 → $derived。

什么时候该用 $effect？ ​

只在需要同步到响应式系统之外时用：操作第三方 DOM 库、写 localStorage、发网络请求、设定时器等。

WARNING

如果你发现自己在 $effect 里更新另一个 $state，几乎总是应该改用 $derived。滥用 $effect 会导致难以追踪的数据流。

为什么我的 $state 对象修改没生效？ ​

检查两点：

  1. 是不是在 .svelte.js 里用了 $state？确保文件后缀正确
  2. 是不是把 $state 的值解构出来了？解构会丢失响应式：
js
let user = $state({ name: '张三' });
let { name } = user; // ❌ name 不再是响应式的
// ✅ 直接访问 user.name

Runes 可以在普通 .js 文件里用吗？ ​

不行。Runes 只能在 .svelte 文件，或 .svelte.js / .svelte.ts 文件里使用。这个后缀约定让编译器识别需要处理的模块。

$effect 里能读 DOM 吗？ ​

能。$effect 在 DOM 更新之后运行，此时可以安全地读取/测量 DOM。如需在更新前运行，用 $effect.pre。

关于本站点 ​

页面上的示例是真的在运行吗？ ​

是的。本站基于 VitePress 构建，通过 @sveltejs/vite-plugin-svelte 把真实的 Svelte 5.57 组件编译并在浏览器中挂载。每个「实时演示」卡片都是活的组件，不是图片或 GIF。

这个站点是怎么把 Svelte 组件嵌进 Markdown 的？ ​

核心思路：

  1. VitePress 的 Vite 配置中加入 Svelte 插件，编译 .svelte 文件
  2. 用一层 Vue 包装组件，在 onMounted 时调用 Svelte 的 mount() API 把组件挂到 DOM
  3. 在 Markdown 里像用普通组件一样使用这些包装器

这样就实现了 Vue 生态（VitePress）与 Svelte 组件的桥接。

示例源码在哪里？ ​

在项目仓库的 docs/demos/ 目录，每个 .svelte 文件都是完整可读的源码，可直接复制使用。

学习资源 ​

资源链接
Svelte 官方文档https://svelte.dev/docs
官方交互式教程https://svelte.dev/tutorial
Runes 介绍https://svelte.dev/docs/svelte/what-are-runes
SvelteKit 文档https://svelte.dev/docs/kit
GitHub 仓库https://github.com/sveltejs/svelte
迁移指南https://svelte.dev/docs/svelte/v5-migration-guide

还是没解决？ ​

  • 官方 Discord 社区非常活跃
  • GitHub Issues 可搜索已知问题
  • 用 npx svelte-check 定位编译/类型错误

祝你用 Svelte 5 开发愉快！有问题随时回到教程首页复习。

基于 VitePress 构建 · 示例使用 Svelte 5.57

Svelte 5 中文教程