用途:在编写任何 Svelte 组件时提供 Svelte 5 语法参考,统一使用 runes,避免 Svelte 4 旧模式。
主要能力(Svelte 4 → Svelte 5 对照):
- props:export let foo 改为 let { foo } = $props();带默认值写 let { foo = 'default' } = $props();$$props 用 rest 解构,$$restProps 用 let { known, ...rest } = $props()。
- 响应式:$: doubled = x * 2 改为 let doubled = $derived(x * 2);多行逻辑用 $derived.by(() => {...})。
- 副作用:$: { sideEffect() } 改为 $effect(() => { sideEffect() }),可返回清理函数;深层响应式数组与对象由 $state 支持。
- 事件:on:click 改为 onclick,on:input 改为 oninput;事件修饰符需手写,如 on:click|preventDefault 改为 onclick={e => { e.preventDefault(); h(e) }}。
- 插槽:slot 改为 {@render children()};具名插槽改为 {@render x?.()};组件间通过 snippet 传递,使用 {#snippet name()}...{/snippet} 定义、{@render name?.()} 渲染。
- 事件派发:createEventDispatcher() 改为回调 prop,如 let { onchange } = $props()。
- store:不再从 svelte/store 导入 writable;const count = writable(0) 改为 let count = $state(0);$count 自动订阅改为直接访问 count;count.set(1) 改为 count = 1;count.update(n => n + 1) 改为 count += 1。
- 双向绑定 prop:let { value = $bindable() } = $props()。
使用方式:按资料中的 Quick Reference 编写 script 与模板;需要更多细节时可加载 references/typescript.md(类型标注)、references/patterns.md(Context API、受控输入、转发 props、异步数据、防抖)、references/gotchas.md(响应式边界、effect 陷阱、绑定怪癖)。
适用场景:编写或迁移 Svelte 5 组件、事件、插槽与状态管理代码。
限制:该页面仅为语法参考,暂未提供安装命令、版本要求、许可与收费信息;具体项目配置与构建步骤也暂未提供。