Skip to content
On this page

eagerComputed

Category
Last Changed
25 days ago

Eager computed without lazy evaluation.

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 eagerComputed() 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

import { eagerComputed } from '@vueuse/core'

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

console.log(hasOpenTodos.value) // false
toTodos.value.push({ title: 'Learn Vue' })
console.log(hasOpenTodos.value) // true
import { eagerComputed } from '@vueuse/core'

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

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

Type Declarations

export declare function eagerComputed<T>(
  fn: () => T,
  options?: WatchOptionsBase
): Readonly<Ref<T>>
export declare function eagerComputed<T>(
  fn: () => T,
  options?: WatchOptionsBase
): Readonly<Ref<T>>

Source

SourceDemoDocs

Contributors

Anthony Fu
wheat
Wenlu Wang
Jems

Changelog

v7.6.0 on 2/8/2022
24734 - feat(useEagerComputed): allow specify watchOptions (#1192)
v6.2.1 on 9/6/2021
46905 - feat: new function (#720)
eagerComputed has loaded