Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
1
Help us understand the problem. What is going on with this article?
@tommy0218

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

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

逆にいうと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>('')

最後に

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

参考

1
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
1
Help us understand the problem. What is going on with this article?