Reactivity

State & Reactivity

Declare reactive state as const state = { ... }. Mutating state re-renders the component.

Component.html

<script>
  const state = { count: 0, user: { name: "Ann" } };

  const inc = () => state.count++;                 // reassign / mutate → re-render
  const rename = () => (state.user = { name: "Bo" });
</script>

<p>{state.count} — {state.user.name}</p>
<button onclick="inc()">+</button>

⚠️

Only state is reactive. Plain const / let variables are not tracked.

Component File Structure Text Interpolation