用途:该资料是面向 Svelte 与 SvelteKit 的编码规范参考,用于在编写、审查涉及 Svelte 代码的任务时给出统一约定。其核心主张是编译器驱动的显式响应式、最小运行时,不使用虚拟 DOM 与 diff。
主要能力与要点:
- Runes 响应式:可变响应式值使用 $state 或 $state.raw;计算值使用 $derived,复杂推导用 $derived.by;$effect 仅作副作用逃生舱,并需返回清理函数;$props 用于组件属性(始终解构);$bindable 标记双向绑定;$inspect 为仅开发期调试;$host 仅用于自定义元素。普通 let 不具响应式,解构 $state 对象会丢失响应性。
- 组件:事件用标准属性 onclick 而非 on:click,无事件修饰符,需在处理器中调用 preventDefault/stopPropagation;组件事件以回调属性传递,不使用 createEventDispatcher;用 snippets 与 {@render} 替代 slot;模板支持 {#if}、{#each}、{#key}、{#await} 及 {@html}、{@const}、{@debug}、{@attach};通过 setContext/getContext 或 createContext 跨层传递。
- SvelteKit:路由文件含 +page.svelte、+page.js、+page.server.js、+layout.、+error.svelte、+server.js;load 分通用与服务端,服务端可访问 cookies、locals、request;表单动作用于服务端 POST,可配合 use:enhance;+server.js 导出 HTTP 方法;hooks 包括 handle、handleFetch、handleError、init、reroute、transport;常用导入有 $app/navigation、$app/state、$app/forms、$env/、$lib。
- 状态与文件约定:SSR 下不要用模块级共享状态,应使用 context 或 event.locals;过滤器状态存 URL;runes 仅在 .svelte 与 .svelte.js/.svelte.ts 文件中可用。
- 性能:用服务端 load 避免瀑布请求,流式返回非关键数据,用 $derived 替代 $effect,启用链接预加载等。
限制:该资料为规范与参考说明,未提供安装命令、版本号、许可、收费或价格等信息,也未给出可直接运行的完整示例,具体实现细节需查阅其引用的 references 文件。属于编程与开发领域的开发规范参考。