VueUse useThrottledRefHistory 具有限流功能,可以自动跟踪响应式对象的更改历史,还提供撤消和重做功能。
名称 | 说明 |
---|---|
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对象或数组你需要设置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;
使用 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 })
如果不使用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
})