Refとreactive

背景

refとreactiveの使い分けがパッとでてこなかったことがあったのでまとめていく。

概要

1. どの状況で使い分ければいいのか
2. refとreactiveの違い

本題

1.どの状況で使い分ければいいのか

refはプリミティブ型に対して使用する。
reactiveはオブジェクト型に対して使用する。

2.refとreactiveの違い

ref

const boolean = ref(false)
// export function ref<boolean>(value: boolean): Ref<boolean>

• TypeScriptの場合は、引数(初期値)を型推論してくれる。
• 明示的にしたい型注釈したい場合は、ref<boolean | null>(false)と使用することもできる。
• 基本的になんでも(オブジェクト、配列、プリミティブ)refで使用ができる。
• 引数の値がオブジェクトの場合は、Vue内部でreactiveに更新している。
  更新している負荷を与えてしまうため、オブジェクトの場合は、reactiveを使用したほうがいいと言われている。
• ref.valueでデータを格納する Ex)boolean.value = true

reactive

const user = reactive({
  firstName: '太郎',
  lastName: '山田',
  height: 160,
  weight: 50
})
// const user: {firstName: string, lastName: string, height: number, weight: number}

• TypeScriptの場合は、引数(初期値)を型推論してくれる。
• 型注釈をつけたい場合は、ジェネクリスを使用できる

const user = reactive<{
  firstName?: string
  lastName?: string
  height: number | null
  weight: number | null
}>({
  firstName: '太郎',
  lastName: '山田',
  height: 160,
  weight: 50,
})

• オブジェクトのみ使用ができる。
• データの格納は通常のオブジェクトの様に操作する。 ex) user.firstName = '二郎''
• 分割代入やスプレッド構文を使用するとリアクティブ性が失われる。

まとめ

基本的に以下の参考文献を参考したが、公式のベストプラクティスを提示していないため、今後は方針がかわる可能性もある。 その時には、再度更新していく。 以下の記事が非常にわかりやすいため、詳細は以下の記事を参考にするといい。

参考文献

Vue Composition APIのrefとreactiveを解説！違いと使い分け

ref vs reactive in Vue 3?