🏠 ホーム
フロントエンド
PHP
Go言語
プログラミングの理解
プログラマーへの道
Google API

Vue 3 computed の仕様を学ぶ：再評価の仕組みとキャッシュの特性

  プログラミング >     フロントエンド >  

computed は Vue 3 のリアクティブシステムで重要な役割を果たします。そのキャッシュ特性や再評価の仕組みを正しく理解することで、効率的なアプリケーション開発が可能になります。この記事では、computed の仕様を3つの重要なポイントに分けて、同じサンプルコードを用いて解説します。

サンプルコード

まず、以下のサンプルコードを基に説明を進めます。

import { ref, computed } from 'vue';

const source = ref([]);
const derived = computed(() => {
  console.log('Recomputing derived');
  return source.value.map((item) => item * 2);
});

// 動作確認
console.log('Initial derived:', derived.value);
source.value.push(1);
source.value.push(2);
console.log('Updated derived:', derived.value);
console.log('Cached derived:', derived.value);

1. computed の再評価は依存関係の変更でトリガーされる

実行結果

Recomputing derived
Initial derived: []
Updated derived: [2, 4]
Cached derived: [2, 4]

解説

ポイント

computed は 依存関係の変化を検知して「再計算の必要がある」ことをマークします。しかし、再評価は実際に値が参照されたタイミングで行われます。

2. キャッシュ機能による再評価の抑制

実行結果

Recomputing derived
Initial derived: []
Updated derived: [2, 4]
Cached derived: [2, 4]

解説

ポイント

computed は 効率的な再評価を目指しており、依存データが変更されない限り同じ値を繰り返し計算することはありません。

3. 直接の要素変更では再計算されない

実行結果

source.value[0] = 10; // 配列の要素を直接変更
console.log('Derived after direct modification:', derived.value);

Derived after direct modification: [2, 4]

解説

解決策

source.value = [...source.value]; // 配列全体を再代入
// または
import { triggerRef } from 'vue';
triggerRef(source); // 手動でリアクティブシステムに変更を通知

結論

Vue 3 の computed は、キャッシュを活用した効率的な計算を提供します。しかし、再評価の仕組みを正しく理解することが重要です。

学びのポイント

  1. 依存関係の変更で再評価がトリガーされる:

    • computed の再評価は依存しているリアクティブな値の変更によってトリガーされる。

  2. キャッシュを利用して再計算を抑制:

    • 同じ依存関係の間ではキャッシュを活用し、不要な計算を防ぐ。

  3. 直接変更では再評価がトリガーされない:

    • 配列やオブジェクトの要素を直接変更する場合、再計算をトリガーするには全体の再代入が必要。

サンプルコードを通じて学ぶ Vue のリアクティブ性

この記事で computed の仕組みを理解できたと思います。computed を効果的に活用し、Vue アプリケーションのパフォーマンスと可読性を向上させてみてください！ 😊

登録日：

更新日：

by

コメント         tweetでコメント