Svelte

核心用法

Svelte技能文档涵盖了现代Svelte及SvelteKit开发中的关键避坑指南，分为五大核心模块：

1. 响应式系统

• 赋值触发响应式更新，数组方法（push/pop）和对象直接修改不会触发，需使用展开运算符或重新赋值
• $: 响应式语句追踪顶层依赖变化，支持多语句块执行
• Svelte 5 Runes 引入 $state()、$derived()、$effect() 作为新的响应式原语

2. Store 状态管理

• $store 语法实现组件自动订阅/取消订阅
• writable/readable/derived 三种存储类型满足不同场景
• 手动订阅需配合 onDestroy 防止内存泄漏

3. 组件生命周期

• onMount 用于客户端副作用，SSR 环境下无法访问 DOM
• tick() 等待 DOM 更新完成
• beforeUpdate/afterUpdate 用于精确 DOM 同步

4. SvelteKit 框架特性

• +page.svelte 与 +page.server.ts 分离服务端/客户端逻辑
• load 函数支持服务端预取数据
• form actions 实现渐进增强表单

5. SSR 注意事项

• $app/environment 的 browser 标志判断运行环境
• 服务端 Store 共享需使用 context 隔离请求数据

显著优点

• 覆盖 Svelte 4 到 Svelte 5 的演进，兼具实用性与前瞻性
• 问题导向：针对高频踩坑点（数组响应式、SSR 环境判断）给出明确解决方案
• 简洁高效：代码示例精炼，快速定位问题

潜在缺点

• 非系统教程，依赖用户已有 Svelte 基础
• Svelte 5 Runes 部分较新，生态工具链仍在完善
• 未涵盖测试、性能优化等进阶主题

适合人群

• 具备 HTML/CSS/JS 基础，正在学习或使用 Svelte 的前端开发者
• 从 Vue/React 迁移至 Svelte 的开发者，需快速理解响应式差异
• 使用 SvelteKit 构建全栈应用，遇到 SSR 相关问题的工程师

常规风险

• 响应式误用可能导致界面不更新，调试困难
• SSR/客户端代码混淆可能引发运行时错误（如服务端访问 window）
• Store 内存泄漏风险（手动订阅未清理）