响应式
Runes 让响应式的来源变得显式:值是状态、还是派生结果、还是副作用,一眼可辨。
下面的每个交互都会实时反映在页面上。
$state$derived$effect$state.raw$state.snapshot
$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}