Vue.jsで開発しているのですが「ref」と「shallowRef」の違いがわかりません。

Question

解決したい問題

refとshallowRefの違いが全く分からないので、その違いを知ることで適切に使い分けることができるようになりたい。

この問題に直面したきっかけ

きっかけは、以下のコードを書いてchromeのデベロッパーツールのconsoleを見た時に「refではなくshallowRefを使った方がいいですよ」という意味のメッセージが書いてあったためです。
なので、refをshallowRefに書き換えることでこのメッセージは出なくなったのですが、そもそも何が違うのかがいくら調べてもわからなかったのでその違いを知りたいと思い質問させていただきました。

<!--==================== template ====================-->
<template>
  <button @click="switchTo(FirstComponent)">FirstComponentにする</button>
  <button @click="switchTo(SecondComponent)">SecondComponentにする</button>

  <KeepAlive>
    <component :is="currentComponent" />
  </KeepAlive>
</template>

<!--==================== script ====================-->
<script setup>
import { ref } from 'vue';
import FirstComponent from '../../components/FirstComponent.vue';
import SecondComponent from '../../components/SecondComponent.vue';

const currentComponent = ref(FirstComponent);

const switchTo = (component) => {
  currentComponent.value = component;
};
</script>

<!--==================== style ====================-->
<style scoped lang="scss">

</style>

Vue received a Component which was made a reactive object. 
This can lead to unnecessary performance overhead, and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`. 

Answer 1

ref と shallowRef の違いは、リアクティブなオブジェクトを作成する際に、どのようにネストされたプロパティを追跡するかにあります。

ref は、オブジェクト内のすべてのネストされたプロパティを再帰的にリアクティブにします。つまり、オブジェクトのどのプロパティが変更されても、Vue はそれを検出して再レンダリングを行います。ただし、この方法は、リアクティブなプロパティが多い場合にパフォーマンスが低下する可能性があります。

一方、shallowRef は、オブジェクトのトップレベルのプロパティのみをリアクティブにします。つまり、ネストされたプロパティが変更されても、Vue はそれを検出しません。これにより、パフォーマンスが向上する可能性がありますが、すべてのプロパティの変更を追跡する必要がある場合は、適切な選択肢ではありません。

あなたのコードの場合、currentComponent は Vue コンポーネントを保持しています。Vue コンポーネントは、通常、多くのリアクティブなプロパティを持っていますが、それらのプロパティが変更されたときにこの特定のコンポーネントが再レンダリングされる必要はありません。そのため、shallowRef を使用することで、パフォーマンスが向上する可能性があります。この理由から、エラーメッセージで shallowRef の使用が推奨されています。

あなたのコードを修正するには、以下のように shallowRef を使用してください。

// 他のインポート文の後に追加
import { shallowRef } from 'vue';

// ref を shallowRef に置き換える
const currentComponent = shallowRef(FirstComponent);

これにより、Vue はコンポーネント内のすべてのプロパティの変更を追跡するのではなく、currentComponentの変更のみを追跡します。これで、パフォーマンスの問題が解決されるはずです。

Comments

[退会済みユーザー]

回答ありがとうございます。
おかげさまで理解できた気がします。
KenRodaさんの回答を元にした私の解釈が合っているか確認したいのですが、私が書いたコードで言うと「refを使ってしまうとFirstComponent.vueファイルの中のリアクティブな値の変更まで検知して再レンダリングするようになるのでパフォーマンスが下がってしまう。しかし、shallowRefを使うとFirstComponent.vueファイル内のリアクティブな値の変更までは検知しなくなるので、無駄な再レンダリングがなくなりパフォーマンスが上がる。ただし、検知する必要性がある場合ならrefを使うのが適切。」ということでしょうか？

[KenRoda]

はい、あなたの解釈は正確です。

`ref` を使った場合、`FirstComponent.vue` や `SecondComponent.vue` の中のリアクティブな値の変更が検知され、それによって再レンダリングが発生する可能性があります。このような状況では、パフォーマンスが低下する可能性があります。

一方で、`shallowRef` を使うことで、`FirstComponent.vue` や `SecondComponent.vue` の内部のリアクティブな値の変更は検知されず、無駄な再レンダリングがなくなり、パフォーマンスが向上します。ただし、ネストされたプロパティの変更を検知する必要がある場合は、`ref` を使うのが適切です。

あなたのコードの例では、`currentComponent` の変更のみを追跡する必要があるため、`shallowRef` が推奨されます。