computedEager
遅延評価のない即時計算。
ヒント
注記💡: Vue 3.4+ を使用している場合は、`computed` をそのまま使用できます。Vue 3.4+ では、計算された新しい値が変更されない場合、`computed`、`effect`、`watch`、`watchEffect`、`render` の依存関係はトリガーされません。参照: https://github.com/vuejs/core/pull/5912
Vue: 計算プロパティが間違ったツールになる場合 で詳細をご覧ください。
- 複雑な計算が行われており、キャッシュと遅延評価のメリットが得られ、本当に必要な場合にのみ再計算する必要がある場合は、`computed()` を使用します。
- 変更頻度の低い戻り値(多くの場合ブール値)を持つ単純な操作を行う場合は、`computedEager()` を使用します。
デモ
使用方法
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
型宣言
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 }