【Vue.js】Vueにおけるリアクティブとは？

はじめに

Vue.jsチュートリアルで学んだことをアウトプットしていきます。

前提

宣言的レンダリング

Vue.jsのテンプレート構文のことです。
JavaScriptのデータに基づいて表示が変更されます。

<!-- 例 -->
<h1>{{ message }}</h1>

リアクティブとは

データの変更が検知されたときに自動的に更新されるような状態のことを言う。

OptionsAPIの場合

<script>
export default {
  data() {
    return {
      message:'Hell World!'
    }
  }
}
</script>

<template>
  <h1>{{ message }}</h1>
</template>

• dataオプションを使ってリアクティブなmessageを宣言する

CompositionAPIの場合(reactive)

<script setup>
import { reactive } from 'vue'

const state = reactive({
  message: 'Hell World!'
})

</script>

<template>
  <h1>{{state.message}}</h1>
</template>

• reactive() はオブジェクト（配列や Map や Set のような組み込み型も含む）全体をリアクティブにする
• reactiveなstateオブジェクトのmessageプロパティの値を宣言的にレンダリングする

CompositionAPIの場合（ref）

<script setup>
import { ref } from 'vue'

const message = ref('Hell World!')
</script>

<template>
  <h1>{{ message }}</h1>
</template>

• ref() は、プリミティブな値（数値、文字列、真偽値など)をリアクティブにする

reactiveとrefどっちを使う?

結論から言うと、CompositionAPIにおいては、ref()が推奨されている。
理由としては、reactive()で以下の制限があることが挙げられています

• プリミティブ値を扱うことができない
• オブジェクト全体を置換できない

reactiveは不要なのか？

refが推奨されているからと言って、reactiveが全く要らないとも限らないらしい。

Vue.jsで挙げられていた一つの活用方法として、「Options API からの移植性」という話がありました。
歴史的な背景を見てみると、実は reactive の方が、根幹の思想に近いところに存在していたことがわかります。

まとめ

• リアクティブとは、データの変更が検知されたときに自動的に更新される状態のこと
• OptionsAPIではdataオプションを使ってリアクティブな状態を宣言することが多い
• CompositionAPIではリアクティブな状態を宣言するときにref()を使うことが推奨されている

参考記事

宣言的レンダリング
リアクティビティーの基礎
【Vue3】リアクティビティーの基礎 ref / reactive について解説 【プログラミング / 英語】
「ref と reactive」 結局どっちを使えばいいのか？ (2024 年最新版)