Vue 3.2 の新しい v-memo ディレクティブを見る

Vue 3.2 のリリースでは、主にパフォーマンスと最適化に関連するいくつかの新しい機能が導入されました.これらの機能の 1 つは、v-memo と呼ばれる新しいディレクティブです.

vメモとは？

v-memo は、名前が示すように、テンプレートの一部のメモ化に関連する新しいディレクティブです.
「メモ化」という用語に慣れていない場合は、ウィキペディアで次のように説明されています.

In computing, memoization or memoisation is an optimization technique used primarily to speed up computer programs by storing the results of expensive function calls and returning the cached result when the same inputs occur again

Vue では、この説明は computed プロパティが既に行っていることのように聞こえます.
実際、v-memo はテンプレートの一部の計算されたプロパティと見なすことができます!

vメモを使う

v-memo は、依存関係の配列である単一のパラメーターを受け入れます.このディレクティブとそのすべての子孫を使用する要素は、依存関係の 1 つが変更された場合にのみ再レンダリングされます.
例えば:

<div v-memo="[dep1, dep2]">
  ...
</div>

dependencies 、つまり v-memo="[]" を指定しない場合、 v-once と同じ機能が得られることに注意してください.

例

v-memo は主にパフォーマンス上の理由から有用であるため、これを使用する最適なシナリオの 1 つは、 v-for を使用してアイテムの膨大なリストをレンダリングする場合です.

<div v-for="item in list" :key="item.id" v-memo="[item.id === selected]">
  <p>ID: {{ item.id }} - selected: {{ item.id === selected }}</p>
</div>

この例では、アイテムが選択または選択解除された場合にのみ再レンダリングするよう v-memo に指示しています.他のすべてのアイテムは完全にスキップされます.
すべてのアイテムのサブテンプレートは既にキーが設定されているため、依存配列に item.id を含める必要はなく、別のサブツリーが生成されます.
心に留めておくべきもう1つのことは、ある種の補間を使用している場合、v-memoはv-forでのみ役立つということです.たとえば、 <MyComponent v-for="item in list" :key="item.id" v-memo /> のようなコンポーネントのリストをレンダリングしている場合、差分は各コンポーネント内で行われるため、v-memo のメリットはありません.

v-memo がリストのパフォーマンスにどのように役立つかを視覚的に示す StackBlitz の例を用意しました: https://stackblitz.com/edit/vue-v-memo