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.capacitynumber否Infinity历史记录容量
options.cloneboolean否true是否深度克隆值

返回值 ​

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

工作原理 ​

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

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