Vue3 CompositionAPI におけるリアクティブな変数の定義方法について ~ ref vs reactive ~

はじめに

Vue3 CompositionAPI におけるリアクティブな変数の定義には ref か reactive を利用します。本記事ではこれらの使い分けやそれぞれの使い方についてまとめます。

対象者

この記事は下記のような人を対象にしています。

• Vue3 CompositionAPI を利用してリアクティブな変数を定義したい人
• ref と reactive の使い分け、使い方について知りたい人

リアクティブな変数とは

リアクティブとは「変数などの値が変化した際に、それに従ってビューが変化する状態」を指します。
身近な例だと、OfficeのExcelなど表計算ソフトをイメージすると分かりやすいです。

リアクティブの探求

A1 セルと A2 セルを A3 セルが参照している時、A1 セルの値を変更すると、A3 セルには自動で再計算された値が表示されます。
これと同じことを Vue3 CompositionAPI で行うために使用するのが、ref か reactive です。

ref と reactive

ref と reactive の使い分け

まず前提として、ref と reactive の使い分けに関して、公式ドキュメントを見た限りベストプラクティスのようなものは確認できませんでした(2022/03/15時点)。そのため下記は全て個人の見解です。
調査すると過去には下記のような記述が公式ドキュメントにあったようです(現在もあるかもしれませんが見つけられませんでした)。

Use ref and reactive just like how you’d declare primitive type variables and object variables in normal JavaScript.
It is recommended to use a type system with IDE support when using this style.

Use reactive whenever you can, and remember to use toRefs when returning reactive objects from composition functions.
This reduces the mental overhead of refs but does not eliminate the need to be familiar with the concept.

これに加えて、公式ドキュメント内で ref が下記のように解説されています。

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

リアクティブの基礎

以上から、プリミティブな値をリアクティブにしたい場合には、ref を利用し、それ以外の場合は reactive を利用するというのが一つの使い分け方法になってくると考えています。

ref の定義方法

実際の使い方は下記になります。
ref は内部の値を受け取り、リアクティブでミュータブルな ref オブジェクトを返します。
ref オブジェクトは value プロパティでリアクティブな値にアクセスできます。

import { ref } from 'vue'

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

reactive の定義方法

実際の使い方は下記になります。
reactive はオブジェクトのリアクティブなコピーを返します。

import { reactive } from 'vue'

const state = reactive({
  count: 0
})

おわりに

本記事では Vue3 CompositionAPI におけるリアクティブな変数の定義方法である ref および reactive についてまとめました。この記事がどなたかの参考になれば幸いです。

参考

• リアクティブの探求
• リアクティブの基礎