computedEager
Eager computed without lazy evaluation.
TIP
Note💡: If you are using Vue 3.4+, you can use computed right away. In Vue 3.4+, if the computed new value does not change, computed, effect, watch, watchEffect, render dependencies will not be triggered. See: 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
ts
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) // trueType Declarations
ts
export type ComputedEagerOptions = WatchOptionsBase
export type ComputedEagerReturn<T = any> = Readonly<ShallowRef<T>>
/**
* 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 shallowRef
*/
export declare function computedEager<T>(
fn: () => T,
options?: ComputedEagerOptions,
): ComputedEagerReturn<T>
export { computedEager as eagerComputed }Source
Contributors
Anthony Fu
Anthony Fu
SerKo
Robin
IlyaL
briwa
Doctorwu
Jonathan Tovar Diaz
wheat