响应式状态
ElfUI beta 主线使用 useRef() 和 useReactive()。基本值用 useRef,对象和数组用 useReactive。
useRef
ts
const count = useRef(0);
count.set(count.peek() + 1);模板中可以直接读取:
ts
defineHtml(`<button>${count}</button>`);代码里需要无追踪读取时使用 peek();需要响应式读取时使用 .value。
set() 只负责写入并返回 void,不能链式调用。连续写入应拆成多条语句:
ts
count.set(1);
count.set(2);useReactive
ts
const user = useReactive({
name: "Elf",
age: 1,
});
user.name = "ElfUI";对象字段的读写会被追踪。数组的 push、splice、重排等也会触发相关依赖。
选择规则
| 数据 | 推荐 |
|---|---|
| number/string/boolean | useRef() |
| 对象 | useReactive() |
| 数组 | useReactive() |
| 派生值 | useComputed() |
useState 已不在 beta public API 主线里。旧代码迁移见“迁移 / 废弃 API”。
