vueuse 中文文档

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>
Catalog
vueuse 入门 State 状态 createGlobalState 全局状态 createInjectionState 组件传值 createSharedComposable useAsyncState 异步响应式 useDebouncedRefHistory useLastChanged 最后修改时间 useLocalStorage 响应式存储 useManualRefHistory useRefHistory 历史快照 useStorageAsync useSessionStorage 响应式存储 useStorage 响应式存储 useThrottledRefHistory Elements 元素 Browser 浏览器 Sensors 感应监测