tag:crieit.net,2005:https://crieit.net/boards/vue-sugoi/feed Crieitで「Vueの知らなかったことをメモしておくところ」ボードに投稿された最近の投稿 2021-09-15T00:54:07+09:00 https://crieit.net/boards/vue-sugoi/feed tag:crieit.net,2005:PublicArticle/5eacdbeb60a261dae38a9bf5236d385a 2021-09-15T00:40:54+09:00 2021-09-15T00:54:07+09:00 https://crieit.net/boards/vue-sugoi/5eacdbeb60a261dae38a9bf5236d385a <p>refとshallowRefが実際どう違うのかわからなかったので確認</p> <pre><code class="ts">// 普通のref const normal = ref({name: 'Tama'}) const normalName = computed(() => `normalRef.value.name: ${normal.value.name}`) console.log('①', normalName.value); // ① normalRef.value.name: Tama // shallowRef const shallow = shallowRef({name: 'Tama'}) const shallowName = computed(() => `shallowRef.value.name: ${shallow.value.name}`) console.log('②', shallowName.value); // ② shallowRef.value.name: Tama // オブジェクト内部の値を変更すると... normal.value.name = 'Mike' // reactiveなのでcomputedが再計算される console.log('③', normalName.value); // ③ normalRef.value.name: Mike // オブジェクト内部の値を変更しても... shallow.value.name = 'Mike' // reactiveではないのでcomputedは再計算されない console.log('④', shallowName.value); // ④ shallowRef.value.name: Tama </code></pre> <h3>動作の違い</h3> <p><code>ref()</code>は引数がオブジェクトだった場合に内部で<code>reactive</code>を呼び出してる（つまり、最初から<code>reactive()</code>で作った場合と同じ）。一方<code>shallowRef()</code>は引数のオブジェクトをリアクティブ変換せずにそのまま保持している。</p> <p>上の例では<code>ref</code>, <code>shallowRef</code>のオブジェクト内の<code>name</code>プロパティを変更している。<br /> <code>ref</code>ではリアクティブなので<code>cmputed</code>が再計算されるが、<code>shllowRef</code>ではされない。</p> <h3>実際問題になるケース</h3> <ul> <li><code>shallowRef</code>にオブジェクトを渡して、かつその中身に依存した<code>computed</code>や<code>watch</code>を書く場合には注意。上の例みたいに変更検知ができなくなる。</li> <li>プリミティブの場合はどっちを使ってもまったく同じ</li> <li>オブジェクトを渡すけど、中身にはタッチしない（オブジェクトそのものが変わった時だけ検知できれば良い）なら、性能的な観点で<code>shallowRef</code>を使った方がよさそう</li> <li><code>ref</code>によるリアクティブ化は再帰的に実行されるので、オブジェクトの構造が深くて大きいとパフォーマンスに影響するかも。この場合にも<code>shallowRef</code></li> </ul> <h3>後で調べる</h3> <p>テンプレートrefの場合ってどうなってるの？DOM要素が入ってるはずだけどこれも再帰的にreactive化されてる？<code>shallowRef</code>でもいいの？</p> yuneco