eagerComputed
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
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
Contributors
Anthony Fu
wheat
Wenlu Wang
Jems