Svelte 5 符文（runes）响应式状态、派生…

在 Svelte 5 中编写响应式状态、计算属性、副作用、Props 或从 Svelte 4 迁移时，用符文语法避免响应式错误。

适用场景

解决思路

1. 按需求选择符文：Props 用 `$props()`；可绑定属性用 `$bindable()`；计算值用 `$derived()`；副作用用 `$effect()`；状态用 `$state()`。
2. 符文只能写在顶层作用域，不要放进条件、循环或嵌套函数中。
3. `$derived` 是可以被重新赋值的，需要只读语义时用 `const` 声明。
4. 不要混用 Svelte 4 与 Svelte 5 的语法。
5. 对象和数组默认就是深度响应式的，无需额外包装或转换。
6. 事件绑定写成 `onclick`，不要写 `on:click`；在布局中用 `{@render children()}` 渲染子内容。
7. 需要类型安全时用 `createContext` 替代 `setContext`/`getContext`。
8. 调试响应式问题时使用 `$inspect.trace`。
9. 按需查阅参考文件：`references/reactivity-patterns.md`（何时用哪个符文）、`references/migration-gotchas.md`（Svelte 4→5 迁移）、`references/component-api.md`（`$props`、`$bindable` 模式）、`references/snippets-vs-slots.md`（新的 snippet 语法）、`references/common-mistakes.md`（反模式及其修复）。
10. 涉及 `@attach` 及其他模板指令时，改查 `svelte-template-directives` 技能。

适用边界 · 注意事项

• 项目仍停留在 Svelte 4 且不打算迁移时，不要套用符文语法。
• 问题只涉及模板指令（如 `@attach`）时，应改用 `svelte-template-directives` 技能。