feat(computedAsync): add option to control watcher's flush timing (#4746)

ferferga · web-flow · commit b1bc8047e150 · 2025-05-14T04:30:54.000Z
diff --git a/packages/core/computedAsync/index.ts b/packages/core/computedAsync/index.ts
@@ -1,7 +1,13 @@
 import type { Fn } from '@vueuse/shared'
 import type { Ref } from 'vue'
 import { noop } from '@vueuse/shared'
-import { computed, ref as deepRef, isRef, shallowRef, watchEffect } from 'vue'
+import {
+  computed,
+  ref as deepRef,
+  isRef,
+  shallowRef,
+  watchEffect,
+} from 'vue'
 
 /**
  * Handle overlapping async evaluations.
@@ -30,6 +36,16 @@ export interface AsyncComputedOptions {
    */
   shallow?: boolean
 
+  /**
+   * The flush option allows for greater control over the timing of a history point, default to `pre`
+   *
+   * Possible values: `pre`, `post`, `sync`
+   *
+   * It works in the same way as the flush option in watch and watch effect in vue reactivity
+   * @default 'pre'
+   */
+  flush?: 'pre' | 'post' | 'sync'
+
   /**
    * Callback when error is caught.
    */
@@ -72,6 +88,7 @@ export function computedAsync<T>(
 
   const {
     lazy = false,
+    flush = 'pre',
     evaluating = undefined,
     shallow = true,
     onError = noop,
@@ -120,7 +137,7 @@ export function computedAsync<T>(
 
       hasFinished = true
     }
-  })
+  }, { flush })
 
   if (lazy) {
     return computed(() => {
