【Vue.js】ref と reactive どっちを使う？

Vue.js の Composition API が登場してから 1 年少しが経過しており、すでに使いこなしている方もいらっしゃるのではないでしょう？ 私自身お仕事で Composition API を使用しており、従来の Options API と比較して UI とロジックの分解がよりやりやすくなったように思えます。リアクティブなデータをコンポーネントの外で定義できるようになったことで、1 つのコンポーネントにまとめて書かざるをえなかった論理的な関心事に分けてそれぞれ別のファイルで定義できます。 書き心地としては React のカスタムフックに近い感じとなっていますね。 個人的には React がクラスコンポーネントから関数コンポーネント + Hook へ移行したように、Vue.js においても Composition API へ移行する流れが来るのではないかと思います。 さて、そんな

[carolina04]

“reactive の大きなデメリットの 1 つとして分割代入するとリアクティブ性が失われる点。分割代入して count を表示しようとすると予想に反して描画は変更されません。コンポーネント内では常に ref を使用する”

[nasikusa_moove]

vue3 の ref と reactive の使い分け、よくわかっていなかったので参考になりました！