$state — 基础状态

最简单的响应式:一个能被读写的值,变化时视图自动更新。

0 当前计数

$derived — 派生状态

从其他状态计算得来,依赖不变就不重算,也不会产生额外的同步逻辑。

小计 199
折扣 10.0 折
合计 199.00

数量 ≥ 3 打 9.2 折,≥ 5 打 8.5 折 —— 折扣与合计都是 $derived。

$effect — 副作用

依赖变化后执行副作用。常用于日志、同步外部系统、操作 DOM。

每次输入都会触发 effect,日志保留最近 6 条。effect 已执行 0 次。

深层响应式 — 数组与对象

$state 会创建响应式代理,数组的 push、splice 以及对象属性赋值都能触发更新。

已完成 1 / 3

  • 学习 $state
  • 理解 $derived
  • 掌握 $effect

$state.raw — 不可变状态

当数据量很大或不需要深层代理时使用。它只监听整体替换,不追踪内部变更。

[1,2,3]

$state.snapshot — 取出纯值

把响应式代理转成普通对象,适合传给外部 API 或做深比较。

{"count":0,"qty":1,"total":199}

基于 Svelte 5 与 SvelteKit 构建 · 全部示例均可在浏览器中实时交互