diff --git a/packages/shared/computedEager/index.md b/packages/shared/computedEager/index.md index edf4c41d80d..cf62e740b3e 100644 --- a/packages/shared/computedEager/index.md +++ b/packages/shared/computedEager/index.md @@ -7,6 +7,11 @@ alias: eagerComputed Eager computed without lazy evaluation. +::: tip +Noteđź’ˇ: If you are using Vue 3.4+, you can straight use `computed` instead. Because in Vue 3.4+, if computed new value does not change, `computed`, `effect`, `watch`, `watchEffect`, `render` dependencies will not be triggered. +Refer: https://github.com/vuejs/core/pull/5912 +::: + Learn more at [Vue: When a computed property can be the wrong tool](https://dev.to/linusborg/vue-when-a-computed-property-can-be-the-wrong-tool-195j). - Use `computed()` when you have a complex calculation going on, which can actually profit from caching and lazy evaluation and should only be (re-)calculated if really necessary. diff --git a/packages/shared/computedEager/index.test.ts b/packages/shared/computedEager/index.test.ts index 0778ec71a1f..491e9c287bb 100644 --- a/packages/shared/computedEager/index.test.ts +++ b/packages/shared/computedEager/index.test.ts @@ -1,4 +1,4 @@ -import { computed, ref, watch } from 'vue-demi' +import { computed, isVue3, ref, watch } from 'vue-demi' import { describe, expect, it, vi } from 'vitest' import { nextTwoTick } from '../../.test' import { computedEager } from '.' @@ -93,7 +93,9 @@ describe('computedEager', () => { expect(isOddEagerComputed.value).toBe(true) expect(isOddComputedSpy).toBeCalledTimes(1) expect(isOddComputedRefSpy).toBeCalledTimes(1) - expect(isOddComputedCollectSpy).toBeCalledTimes(3) + // Since Vue 3.4, computed will not trigger collect change if result is not changed + // refer: https://github.com/vuejs/core/pull/5912 + expect(isOddComputedCollectSpy).toBeCalledTimes(isVue3 ? 2 : 3) expect(isOddComputedRefCollectSpy).toBeCalledTimes(2) }) }) diff --git a/packages/shared/computedEager/index.ts b/packages/shared/computedEager/index.ts index 920223d7f07..700fa560347 100644 --- a/packages/shared/computedEager/index.ts +++ b/packages/shared/computedEager/index.ts @@ -4,6 +4,16 @@ import type { Ref, WatchOptionsBase } from 'vue-demi' import { readonly, shallowRef, watchEffect } from 'vue-demi' +/** + * Note: If you are using Vue 3.4+, you can straight use computed instead. + * Because in Vue 3.4+, if computed new value does not change, + * computed, effect, watch, watchEffect, render dependencies will not be triggered. + * refer: https://github.com/vuejs/core/pull/5912 + * + * @param fn effect function + * @param options WatchOptionsBase + * @returns readonly ref + */ export function computedEager(fn: () => T, options?: WatchOptionsBase): Readonly> { const result = shallowRef()