diff --git a/packages/core/computedAsync/index.md b/packages/core/computedAsync/index.md index f03491c5e1e..cf81c534717 100644 --- a/packages/core/computedAsync/index.md +++ b/packages/core/computedAsync/index.md @@ -83,3 +83,5 @@ const userInfo = computedAsync( - Just like Vue's built-in `computed` function, `computedAsync` does dependency tracking and is automatically re-evaluated when dependencies change. Note however that only dependency referenced in the first call stack are considered for this. In other words: **Dependencies that are accessed asynchronously will not trigger re-evaluation of the async computed value.** - As opposed to Vue's built-in `computed` function, re-evaluation of the async computed value is triggered whenever dependencies are changing, regardless of whether its result is currently being tracked or not. + +- The default value of the `shallow` will be changed to `true` in the next major version. diff --git a/packages/core/computedAsync/index.ts b/packages/core/computedAsync/index.ts index e067fb77d65..2abf20b7d4a 100644 --- a/packages/core/computedAsync/index.ts +++ b/packages/core/computedAsync/index.ts @@ -1,7 +1,7 @@ import type { Fn } from '@vueuse/shared' import { noop } from '@vueuse/shared' import type { Ref } from 'vue-demi' -import { computed, isRef, ref, watchEffect } from 'vue-demi' +import { computed, isRef, ref, shallowRef, watchEffect } from 'vue-demi' /** * Handle overlapping async evaluations. @@ -23,6 +23,15 @@ export interface AsyncComputedOptions { */ evaluating?: Ref + /** + * Use shallowRef + * + * The default value will be changed to `true` in the next major version + * + * @default false + */ + shallow?: boolean + /** * Callback when error is caught. */ @@ -56,11 +65,12 @@ export function computedAsync( const { lazy = false, evaluating = undefined, + shallow = false, onError = noop, } = options const started = ref(!lazy) - const current = ref(initialState) as Ref + const current = (shallow ? shallowRef(initialState) : ref(initialState)) as Ref let counter = 0 watchEffect(async (onInvalidate) => {