useRefHistory
跟踪 ref 的变更历史,支持撤销和重做操作。
函数签名
typescript
function useRefHistory<T>(
source: Ref<T>,
options?: RefHistoryOptions
): {
history: Ref<T[]>
undo: () => void
redo: () => void
clear: () => void
canUndo: Ref<boolean>
canRedo: Ref<boolean>
}
interface RefHistoryOptions {
capacity?: number // 历史记录容量,默认 Infinity
clone?: boolean // 是否深度克隆,默认 true
}参数
| 参数名 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
source | Ref<T> | 是 | - | 要跟踪的 ref |
options.capacity | number | 否 | Infinity | 历史记录容量 |
options.clone | boolean | 否 | true | 是否深度克隆值 |
返回值
| 类型 | 说明 |
|---|---|
{ history, undo, redo, clear, canUndo, canRedo } | 历史记录控制对象 |
工作原理
- 监听 ref 的变化,将每次变更添加到历史记录
- 维护当前位置指针
undo(): 指针前移,恢复前一个值redo(): 指针后移,恢复后一个值- 新的变更会清空当前位置之后的历史
- 超过 capacity 时删除最旧的记录
适用于实现编辑器的撤销/重做功能。