vueuse 中文文档

VueUse useThrottledRefHistory 限流快照

VueUse useThrottledRefHistory 具有限流功能,可以自动跟踪响应式对象的更改历史,还提供撤消和重做功能。

与其他History区别

名称说明
useDebouncedRefHistory防抖、连续触发的事件,只在最后执行一次记录
useThrottledRefHistory限流、一段时间内只执行一次记录
useManualRefHistory需要手动提交记录

代码示例

import { ref } from 'vue';
import { useThrottledRefHistory } from '@vueuse/core';

const times = ref(0);
const { history, undo, redo, canUndo, canRedo,clear ,commit  } = useThrottledRefHistory(times);
//撤销操作
undo();
//重置
redo();
//是否允许撤回
let isAllow=canUndo;
//是否允许重置
let isAllow=canRedo;
//清除全部历史记录
clear();
//手动提交记录
commit();

在线例子

例子

跟踪Objects/arrays

当跟踪的是Objects/arrays对象或数组你需要设置deep:true

// 需要记录的ref对象
const userInfo = ref({num:100,name:'文一路'});
// deep 深化拷贝, 
const { history, undo, redo, canUndo, canRedo } = useThrottledRefHistory(userInfo, 
{
   clone: true
 });
//修改对象数据
userInfo.value.num=userInfo.value.num+1;

自定义clone函数

使用 js原生的 structuredClone进行深拷贝:

import { useThrottledRefHistory } from '@vueuse/core'

const refHistory = useThrottledRefHistory(target, { clone: structuredClone })

或者使用 lodash的cloneDeep函数进行深拷贝:

import { cloneDeep } from 'lodash-es'
import { useThrottledRefHistory } from '@vueuse/core'

const refHistory = useThrottledRefHistory(target, { clone: cloneDeep })

或者lightweight klona:

import { klona } from 'klona'
import { useThrottledRefHistory } from '@vueuse/core'

const refHistory = useThrottledRefHistory(target, { clone: klona })

自定义Dump/Parse

如果不使用clone参数,您可以传递自定义函数来控制序列化和解析函数

import { useThrottledRefHistory } from '@vueuse/core'

const refHistory = useThrottledRefHistory(target, {
  dump: JSON.stringify,
  parse: JSON.parse,
})

记录快照数量

//最多记录15条历史快照
const refHistory = useThrottledRefHistory(target, {
  capacity: 15, 
})
//清除全部快照
refHistory.clear();

刷新时间

 // 'pre'(默认) , 'post' and 'sync'
const refHistory = useThrottledRefHistory(target, {
  flush: 'sync',
})

默认值是'pre',以使其与Vue的watchers的默认值保持一致,如果需要在同一个“tick”中创建多个历史点,可以手动使用commit()

const num = ref(0)
const { history, commit } = useThrottledRefHistory(num)

num.value = 1
commit()

num.value = 2
commit()

console.log(history.value);
//因为手动commit了 所以一次tick多了2个快照
/* [
  { snapshot: 2 },
  { snapshot: 1 },
  { snapshot: 0 },
] */

同步刷新sync,当跟踪的对象被修改后会立即产生快照,但你可以使用batch(fn)将多个同步操作生成单个历史快照

const item = ref({ names: [], version: 1 })
const { history, batch } = useThrottledRefHistory(item, { flush: 'sync' })

batch(() => {
 //第一次修改
 item.names.push('Lena');
 //第二次修改
 item.version++;
})

console.log(history.value)
/* [
  { snapshot: { names: [ 'Lena' ], version: 2 },
  { snapshot: { names: [], version: 1 },
] */

如果使用{flush: 'sync', deep: true},批处理在对数组的操作也很有用。Splice最多可以生成三个原子操作,这些操作将被推送到ref历史记录中。

const arr = ref([1, 2, 3])
const { history, batch } = useThrottledRefHistory(r, { deep: true, flush: 'sync' })

batch(() => {
  arr.value.splice(1, 1) // batch ensures only one history point is generated
})
Catalog
vueuse 入门 State 状态 createGlobalState 全局状态 createInjectionState 组件传值 createSharedComposable useAsyncState 异步响应式 useDebouncedRefHistory useLastChanged 最后修改时间 useLocalStorage 响应式存储 useManualRefHistory useRefHistory 历史快照 useStorageAsync useSessionStorage 响应式存储 useStorage 响应式存储 useThrottledRefHistory Elements 元素 Browser 浏览器 Sensors 感应监测