用途:在 Svelte 项目中编写、编辑或分析组件时加载,提供现代 Svelte 写法的最佳实践指导。
主要能力与要点: 响应式状态:仅对需要触发 $effect、$derived 或模板更新的变量使用 $state;对象与数组会被深度代理,若大对象只做整体重新赋值(如 API 响应),改用 $state.raw 以减少开销。 派生值:用 $derived 计算,而非在 $effect 中赋值;$derived 接收表达式而非函数,复杂表达式用 $derived.by。派生值可写,表达式变化时会重新求值;若表达式返回对象或数组,不会深度响应。 副作用:$effect 是逃生舱,应尽量避免,尤其避免在其中更新状态。同步外部库可用 {@attach ...};响应用户交互直接写在事件处理器或用函数绑定;调试用 $inspect;观察外部事物用 createSubscriber。不要用 if (browser) 包裹 effect 内容。 属性:把 props 视为会变化,依赖 props 的值通常用 $derived。 调试:$inspect.trace(label) 放在 $effect 或 $derived.by 首行可追踪依赖。 事件:以 on 开头的属性即事件监听,支持简写与展开;window/document 监听用 svelte:window、svelte:document,避免 onMount 或 $effect。 Snippets:在模板中声明可复用标记,用 {@render ...} 实例化或作为 props 传递。 each 块:优先使用带 key 的 each 块以提升性能,key 须唯一,勿用索引;若需修改条目(如 bind:value={item.count})避免解构。 样式:用 style: 指令设置 CSS 自定义属性供组件内 var() 使用;父组件控制子组件样式优先用 CSS 自定义属性,必要时用 :global。 上下文:优先用 context 而非共享模块状态,避免 SSR 时在用户间泄漏;用 createContext 而非 setContext/getContext 以获得类型安全。 异步:5.36 及以上可用 await 表达式与 hydratable,需在 svelte.config.js 启用 experimental.async,尚未完全稳定。 避免旧特性:新代码用 runes 模式,用 $state 替代隐式响应式,用 $derived/$effect 替代 $:,用 $props 替代 export let、$$props、$$restProps,用 onclick={...} 替代 on:click={...},用 {#snippet ...} 与 {@render ...} 替代 <slot>、$$slots、svelte:fragment,用 <DynamicComponent> 替代 svelte:component,用导入自身组件替代 svelte:self,用带 $state 字段的类替代 stores,用 {@attach ...} 替代 use:action,用 clsx 风格数组与对象替代 class: 指令。
限制:资料未提供安装命令、收费、平台与效果信息。