【Vue3】refとreactiveの使い分けについて

Vue3系やCompositionAPIからはdata()が廃止される代わりに監視したい値をrefやreactiveを使用することで値の変更を監視することができるようになりました。

逆にいうとrefでもreactiveでも値の変更を監視することができるわけですから、どっち使ったらいいの？っていう疑問が出てくるかと思います。

refの使用シーン

独立したプリミティブ値(例えば文字列)があって、それをリアクティブにしたい場合を想像してみてください。もちろん、同じ値の文字列を単一のプロパティとして持つオブジェクトを作成して reactive に渡すこともできます。Vue にはこれと同じことをしてくれる ref メソッドがあります

vue公式より引用したrefの紹介です。
refには一つの値を監視することができます。

refの値にはvalueという名前のプロパティが含まれているため、値を変更するには下記のようにします。

import { ref } from 'vue'

const conter = ref<number>(0)

counter.value++

refの使用シーンとして、単一のプロパティを監視したい時に使用します

reactiveの使用シーン

逆にreactiveは複数のプロパティを監視することができます。
vue2系までのdataのように使用することができますね。

import { reactive } from 'vue'

interface FormState {
  email: string
  password: string
}

const formState = reactive<FormState>({
  email: '',
  password: ''
})

例えば上記のように、ユーザー作成ページのようなformオブジェクトの中に、一つの変数で値を監視したいときに使用する時に結構便利な機能となっております。

もちろん下記のように書いても機能します。

import { ref } from 'vue'

const email = ref<string>('')
const password = ref<string>('')

最後に

この記事でご紹介する以外に、明確な使い分けっていうのがあったらコメント欄で教えていただけると幸いです

参考