Skip to content

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
}

参数

参数名类型必填默认值说明
sourceRef<T>-要跟踪的 ref
options.capacitynumberInfinity历史记录容量
options.clonebooleantrue是否深度克隆值

返回值

类型说明
{ history, undo, redo, clear, canUndo, canRedo }历史记录控制对象

工作原理

  1. 监听 ref 的变化,将每次变更添加到历史记录
  2. 维护当前位置指针
  3. undo(): 指针前移,恢复前一个值
  4. redo(): 指针后移,恢复后一个值
  5. 新的变更会清空当前位置之后的历史
  6. 超过 capacity 时删除最旧的记录

适用于实现编辑器的撤销/重做功能。