コンテンツにスキップ

computedEager

カテゴリ
エクスポートサイズ
398 バイト
最終更新日
先週
エイリアス
eagerComputed

遅延評価のない即時計算。

ヒント

注記💡: Vue 3.4+ を使用している場合は、`computed` をそのまま使用できます。Vue 3.4+ では、計算された新しい値が変更されない場合、`computed`、`effect`、`watch`、`watchEffect`、`render` の依存関係はトリガーされません。参照: https://github.com/vuejs/core/pull/5912

Vue: 計算プロパティが間違ったツールになる場合 で詳細をご覧ください。

  • 複雑な計算が行われており、キャッシュと遅延評価のメリットが得られ、本当に必要な場合にのみ再計算する必要がある場合は、`computed()` を使用します。
  • 変更頻度の低い戻り値(多くの場合ブール値)を持つ単純な操作を行う場合は、`computedEager()` を使用します。

デモ

遅延計算
5以上: false
レンダリング回数: 0
即時計算
5以上: false
レンダリング回数: 0
カウント: 0

使用方法

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 }

ソース

ソースデモドキュメント

貢献者

Anthony Fu
briwa
Anthony Fu
Doctorwu
Jonathan Tovar Diaz
wheat

変更履歴

v12.0.0-beta.1 2024/11/21
0a9ed - feat!: Vue 2 のサポートを廃止、バンドルの最適化とクリーンアップ (#4349)
v10.7.2 2024/1/14
b6d8f - fix: vue3.4+ の変更に適応 (#3689)

MITライセンスでリリースされています。