Vueuse useDebouncedRefHistory 具有防抖功能的历史记录

Vueuse useDebouncedRefHistory 库用于记录 ref 对象值的历史记录，同时支持撤销和重做操作。它与 useRefHistory 类似，但它提供debounce 选项，防止频繁记录历史数据，它具有防抖功能。

代码示例

import { ref } from 'vue'
import { useDebouncedRefHistory } from '@vueuse/core'

// 需要记录的ref对象
const counter = ref({num:100,name:'文一路'});
// deep 深化拷贝，
// debounce 防抖时间间隔 1000毫秒
// canUndo 是否可以撤回
const { history, undo, redo, canUndo, canRedo  } = useDebouncedRefHistory(counter, { deep: true, debounce: 1000 })

const onCounter=()=>{
  counter.value.num=counter.value.num+1;
}

在线例子

例子

完整代码

<template>
  <div class="pagex">    
    <p>canUndo: {{ canUndo }}</p>
    <p>counter: {{ counter }}</p>
    <pre lang="json" >{{ history}}</pre>
    <button @click="onCounter">
      累加counter
    </button>
    <button @click="undo">
      撤销 undo
    </button>
    <button @click="redo">
      重置 redo
    </button>
  </div>
</template>
<script setup lang="ts">
/*
 vueuse 中文文档
 https://www.itxst.com/vueuse/tutorial.html
*/
import { ref } from 'vue'
import { useDebouncedRefHistory } from '@vueuse/core'

// 需要记录的ref对象
const counter = ref({num:100,name:'文一路'});
// deep 深化拷贝，
// debounce 防抖时间间隔 1000毫秒
// canUndo 是否可以撤回
const { history, undo, redo, canUndo, canRedo  } = useDebouncedRefHistory(counter, { deep: true, debounce: 1000 })

const onCounter=()=>{
  counter.value.num=counter.value.num+1;
}
</script>