Skip to content

computedEager ​

Category
Export Size
398 B
Last Changed
2 months ago
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.

  • 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.
  • Use computedEager() when you have a simple operation, with a rarely changing return value – often a boolean.

Demo ​

Lazy Computed
Is over 5: false
Renders: 0
Eager Computed
Is over 5: false
Renders: 0
Count: 0

Usage ​

js
import { computedEager } from '@vueuse/core'

const todos = ref([])
const hasOpenTodos = computedEager(() => !!todos.length)

console.log(hasOpenTodos.value) // false
toTodos.value.push({ title: 'Learn Vue' })
console.log(hasOpenTodos.value) // true

Type Declarations ​

typescript
/**
 * 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 declare function computedEager<T>(
  fn: () => T,
  options?: WatchOptionsBase,
): Readonly<Ref<T>>
export { computedEager as eagerComputed }

Source ​

Source • Demo • Docs

Contributors ​

Anthony Fu
Doctorwu
Jonathan Tovar Diaz
wheat

Changelog ​

v10.7.2 on 1/14/2024
b6d8f - fix: adapt to changes in vue3.4+ (#3689)

Released under the MIT License.