こんにちは。野中やすおです。
今回の記事では、Vue.js の3系で新しく導入された概念である「shallowRef」の説明と実際の使い方例について紹介していきます。
shallowRefとは何か？
shallowRefは、Vue.js 3系で導入されたReactivity APIの一種です。shallowRef は、通常のrefと同様にリアクティビティを実現しますが、異なる動作を行います。具体的には通常のrefでは、オブジェクトや配列をref でラップすると、そのオブジェクトや配列の中の全てのプロパティもリアクティブになります。これは、ネスト化されたオブジェクトの中身までもリアクティブなデータ構造を作り出しています。
一方で、ラップされたオブジェクトや配列自体はリアクティブになりますが、その中のプロパティはリアクティブになりません。つまり、shallowという英単語は、「浅い」という意味ですが、shallowRefを使うと浅いレベルのリアクティブなデータ構造を作ることができます。
shallowRef は、深いネストがないオブジェクトや、大きなデータ構造のパフォーマンスの最適化、意図しないリアクティブを防ぎたい時に使用することができます。
またshallowRefでは、.valueを使ったアクセスのみリアクティブになります。
shallowRefの使用例
以下の例では、shallowRefでラップされたidとnameというプロパティを持った配列examplesを作成しています。
examplesに対する変更はwatchEffectによって検出されます。しかし、配列の中のオブジェクトのプロパティが変更されても、その変更は検出されません。これがshallowRefの特性になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<script setup lang="ts"> type Example = { id: number; name: string; }; const examples = shallowRef<Example>(); // shallowRefでラップされたデータに要素を追加 examples.value = { id: 1, name: "Example 1" }; // shallowRefの中身が変更されると反応する watchEffect(() => { console.log("Detected a change in examples:", examples.value); }); // この変更は検出されない examples.value.id = 3; examples.value.name = "Example 3"; // examples.valueの変更は検出される examples.value = { id: 2, name: "Example 2" }; </script> |
参考
Vue.js - The Progressive JavaScript Framework…
