こんにちは。野中やすおです。
前回の記事では、Vue3のReactivity APIの一種のshallowRefを紹介しました。
今回の記事では、shallowRefと関わる挙動を行うtriggerRefについて紹介します。
triggerRefは、shallowRefの中身の変更がリアクティブに自動的に検出されない場合に、手動で変更の通知を行うための関数になります。
triggerRefとは何か？
前回の記事で紹介した通り、shallowRefでラップされたオブジェクトのプロパティを変更すると、変更はリアクティブに自動的には検出されません。そこで、このような変更が行われた後にtriggerRefを使用することで、変更を手動で通知し、関連するリアクティブな依存関係を更新することができます。
triggerRefは、頻繁に使うものではないかもしれませんが、今後積極的にshallowRefを使っていく中で同時に使っていくと有用になる可能性があります。
triggerRefの使用例
以下では、例の如くshallowRefでラップされたidとnameというプロパティを持った配列examplesを作成しています。examplesに対する変更はwatchEffectによって検出されます。しかし、配列の中のオブジェクトのプロパティが変更されても、その変更は検出されません。なので下記の例では、examples.value.id = 3; examples.value.name = “Example 3”;の変更は検出されません。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<script setup lang="ts"> type Example = { id: number; name: string; }; const examples = shallowRef<Example[]>([{ id: 1, name: "Example 1" }]); // examplesの変更を監視 watchEffect(() => { console.log("Detected a change in examples:", examples.value); }); // shallowRefを使っているため、以下のような変更は検出されない examples.value[0].id = 2; examples.value[0].name = "Updated Example"; // triggerRefを使用して手動で変更を通知 // 再度、コンソールに"Detected a change in examples:{ id: 2, name: "Updated Example" }"が表示されるようになる triggerRef(examples); </script> |
一方で、triggerRefを使うことで手動で変更を通知することができます。そして、再びコンソール上にDetected a change in examples: { id: 2, name: “Updated Example” }が表示されることになります。
参考
Vue.js - The Progressive JavaScript Framework…
