Svelte避坑指南

Reactivity Triggers

• - Assignment triggers reactivity — arr = arr after push, or use INLINECODE1
• Array methods don't trigger — arr.push() needs reassignment: INLINECODE3
• Object mutation same issue — obj.key = val; obj = obj or spread: INLINECODE5
• INLINECODE6 reactive statements run on dependency change — but only top-level assignments tracked

Reactive Statements

• - $: runs when dependencies change — list all dependencies used
• INLINECODE8 block for multiple statements — all run together
• INLINECODE9 order matters — later statements can depend on earlier
• Avoid side effects in $: — prefer derived values, use onMount for effects

Stores

• - $store auto-subscribes in component — automatic unsubscribe on destroy
• Manual subscribe needs unsubscribe — INLINECODE13
• INLINECODE14 for read/write — readable for external data sources
• INLINECODE16 for computed values — INLINECODE17

Component Lifecycle

• - onMount runs after first render — return cleanup function
• No access to DOM before onMount — document etc. not available in SSR
• INLINECODE21 / afterUpdate for DOM sync — rarely needed
• INLINECODE23 to wait for DOM update — await tick() after state change

Props

• - export let propName to declare — required by default
• INLINECODE26 for optional — default value if not passed
• Props are reactive — component re-renders on change
• INLINECODE27 and $$restProps for pass-through — but explicit props preferred

Events

• - createEventDispatcher for custom events — INLINECODE30
• INLINECODE31 to listen — on:click, INLINECODE33
• INLINECODE34 modifiers — |stopPropagation, INLINECODE36
• Event forwarding: on:click without handler — forwards to parent

SvelteKit

• - +page.svelte for pages — +page.server.ts for server-only load
• INLINECODE40 function for data fetching — runs on server and client navigation
• INLINECODE41 for page, navigating, etc. — $page.params, INLINECODE43
• INLINECODE44 actions for mutations — progressive enhancement, works without JS

SSR Gotchas

• - browser from $app/environment — check before using window/document
• INLINECODE47 only runs client-side — safe for browser APIs
• Stores initialized on server shared between requests — use context for request-specific
• INLINECODE48 in load is special — relative URLs work, credentials handled

Svelte 5 Runes

• - $state() replaces let for reactivity — INLINECODE51
• INLINECODE52 replaces $: for computed — INLINECODE54
• INLINECODE55 for side effects — replaces $: with side effects
• Runes are opt-in per file — can mix with Svelte 4 syntax

Common Mistakes

• - Destructuring props loses reactivity — let { prop } = $props() in Svelte 5, or don't destructure in 4
• Store value vs store — $store for value, store for subscribe/set
• Transition on conditional — {#if show}<div transition:fade> not on wrapper
• Key block for re-render — {#key value}...{/key} destroys and recreates