4a3ce4cc1d
Add comprehensive reference documentation for: - Vitest: environments, projects/workspaces, type testing, vi utilities - Pinia: HMR, Nuxt integration, SSR setup - Vue: built-in components (Transition, Teleport, Suspense, KeepAlive) and advanced directives
63 lines
2.0 KiB
Markdown
63 lines
2.0 KiB
Markdown
---
|
||
category: Reactivity
|
||
alias: eagerComputed
|
||
---
|
||
|
||
# computedEager
|
||
|
||
Eager computed without lazy evaluation.
|
||
|
||
::: info
|
||
This function will be removed in future version.
|
||
:::
|
||
|
||
::: tip
|
||
Note💡: If you are using Vue 3.4+, you can use `computed` right away, you no longer need this function.
|
||
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](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.
|
||
- Use `computedEager()` when you have a simple operation, with a rarely changing return value – often a boolean.
|
||
|
||
## 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) // true
|
||
```
|
||
|
||
## Type Declarations
|
||
|
||
```ts
|
||
export type ComputedEagerOptions = WatchOptionsBase
|
||
export type ComputedEagerReturn<T = any> = Readonly<ShallowRef<T>>
|
||
/**
|
||
*
|
||
* @deprecated This function will be removed in future version.
|
||
*
|
||
* 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>
|
||
/** @deprecated use `computedEager` instead */
|
||
export declare const eagerComputed: typeof computedEager
|
||
```
|