docs(useRefHistory): doc completion

vueuse · pkc918 · Jul 22, 2025 · Jul 22, 2025 · Jul 30, 2025 · Jul 30, 2025
commit ed530be769a2d51aa737aa29e0a98fe9b8c41969
diff --git a/packages/core/useRefHistory/index.md b/packages/core/useRefHistory/index.md
@@ -45,6 +45,9 @@ console.log(counter.value) // 0
 When working with objects or arrays, since changing their attributes does not change the reference, it will not trigger the committing. To track attribute changes, you would need to pass `deep: true`. It will create clones for each history record.
 
 ```ts
+import { useRefHistory } from '@vueuse/core'
+import { nextTick, ref } from 'vue'
+
 const state = ref({
   foo: 1,
   bar: 'bar',
@@ -112,6 +115,8 @@ const refHistory = useRefHistory(target, {
 We will keep all the history by default (unlimited) until you explicitly clear them up, you can set the maximal amount of history to be kept by `capacity` options.
 
 ```ts
+import { useRefHistory } from '@vueuse/core'
+
 const refHistory = useRefHistory(target, {
   capacity: 15, // limit to 15 history records
 })
@@ -126,6 +131,8 @@ From [Vue's documentation](https://vuejs.org/guide/essentials/watchers.html#call
 In the same way as `watch`, you can modify the flush timing using the `flush` option.
 
 ```ts
+import { useRefHistory } from '@vueuse/core'
+
 const refHistory = useRefHistory(target, {
   flush: 'sync', // options 'pre' (default), 'post' and 'sync'
 })
@@ -134,6 +141,9 @@ const refHistory = useRefHistory(target, {
 The default is `'pre'`, to align this composable with the default for Vue's watchers. This also helps to avoid common issues, like several history points generated as part of a multi-step update to a ref value that can break invariants of the app state. You can use `commit()` in case you need to create multiple history points in the same "tick"
 
 ```ts
+import { useRefHistory } from '@vueuse/core'
+import { shallowRef } from 'vue'
+
 const r = shallowRef(0)
 const { history, commit } = useRefHistory(r)
 
@@ -154,6 +164,9 @@ console.log(history.value)
 On the other hand, when using flush `'sync'`, you can use `batch(fn)` to generate a single history point for several sync operations
 
 ```ts
+import { useRefHistory } from '@vueuse/core'
+import { ref } from 'vue'
+
 const r = ref({ names: [], version: 1 })
 const { history, batch } = useRefHistory(r, { flush: 'sync' })
 
@@ -172,6 +185,9 @@ console.log(history.value)
 If `{ flush: 'sync', deep: true }` is used, `batch` is also useful when doing a mutable `splice` in an array. `splice` can generate up to three atomic operations that will be pushed to the ref history.
 
 ```ts
+import { useRefHistory } from '@vueuse/core'
+import { ref } from 'vue'
+
 const arr = ref([1, 2, 3])
 const { history, batch } = useRefHistory(arr, { deep: true, flush: 'sync' })