Vueは友達
ホーム
>
Vue
>
vue.js3超初心者向け。リアクティブとref・reactiveの違い

vue.js3超初心者向け。リアクティブとref・reactiveの違い

vue.js3超初心者向け。リアクティブとref・reactiveの違い

525 回閲覧されました

みなさんこんにちは、jonioです。

今回はvue.js3のrefとreactiveの違いについての解説です。

Laravelの無料学習サイトを作りました

Laravelを勉強したい人向けの無料の学習サイトを作りました。

ここからリンクに飛べますのでぜひ利用してください。

リアクティブ

今回の解説を理解するに当たって「リアクティブ」という言葉の意味を知ってないといけません。（今回解説するreactiveと別物です）

データの変化を自動で検知して、それに応じて画面を更新してくれる仕組みのことです。

具体的なコードで説明した方がイメージがしやすいと思うのでリアクティブを使わないと面倒なのが分かる簡単なコードで解説します。

リアクティブを使わない場合のサンプルコード

refを使わずに画面を更新するJavaScirptのコードを考えます。

let count = 0;
count++;

document.getElementById("counter").innerText = count;

2行目で値を変更→4行目で自分で画面に表示する値の更新をする。

自分で更新をしないといけないので面倒ですよね。

リアクティブでは値の更新を勝手にやってくれます。

refとは

リアクティブなデータを作るための関数です。

ある値にrefを使うことでVueがその値の変化を監視して値に変化があると自動的に画面を更新してくれます。

使い方をサンプルコードで説明します。

使い方のサンプルコード

下記のコードで考えます。

<template>
  <p>{{ count }}</p>
  <button @click="count++">増やす</button>
</template>

<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>

refを使う為には7行目の記述をします。

8行目はrefの初期値を設定しています。

「ref(初期値)」と記述します。

今回はrefの対象が数値なので初期値を0にしました。

初期値が配列になる場合は「ref([])」と記述したり初期値が真偽値になる場合は「ref(false)」と記述したりします。

refに設定した値を表示するのは2行目でVue.jsでの変数の表示をする場合と同じです。

3行目の「増やす」ボタンをクリックするたびに画面に表示される値が0→1→2・・・と増えていき画面が更新されます。

これがrefの性質です。

refの値をテンプレートに表示する場合は「{{ count }}」と記述すればいいですがメソッドに記述する場合は少しだけ変わるのでその説明もします。

refをメソッドで使う場合

コードを付け足します。

<template>
  <p>{{ count }}</p>
  <button @click="count++">増やす</button>
</template>

<script setup>
import { ref } from 'vue';
const count = ref(0);


//ここから追加
if (count > 3) {
  console.log('countは3を超えました');
}
//ここまで追加


</script>

追加した記述ではconsole.logは動作しません。

理由はrefに指定したcountの中身は下記になっているからです。

{ value: 0 }

valueは固定です。

だから「if (count > 3)」は「if (count.value > 3)」と記述しないといけません。

じゃあ「テンプレートの時は何で「{{ count }}」でいいの？」って思いませんか？

Vueが勝手に「.value」を付けているからです。

refをHTMLに使う場合

これは変わった使い方と言えます。

初期から値が変更したらrefの値を変更しません。

下記のコードで考えます。

<template>
  <p ref="textEl">これは色が変わるテキストです</p>
  <button @click="changeColor">色を変える</button>
</template>

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

const textEl = ref(null);

function changeColor() {
  textEl.value.style.color = 'red';
}
</script>

7行目でtextElの初期値をnullに設定しています。

値がnullから変化するのはDOMが表示されるタイミングです。

理由はpタグにrefを付けているからです。

これによりtextELの値はnullから「<p>これは色が変わるテキストです</p>」になります。

だから12行目の「textEl.value」は「<p>これは色が変わるテキストです</p>」になります。

次はreactiveです。

reactiveとは

refを理解できれば簡単です。

refを拡張した感じですが記述は少しだけ違います。

refの時のサンプルコードを書き換えると下記になります。

<template>
  <p>{{ state.count }}</p>
  <button @click="state.count++">増やす</button>
</template>

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

const state = reactive({
  count: 0
});
</script>

7行目でreactiveを使う為の記述をしています。

9〜11行目がreactiveを使った時の初期値の設定ですがrefの時は下記でした。

const count = ref(0);

1つの変数に対して1つの初期値を設定していました。

reactiveの場合はオブジェクトの形で初期値の設定をすることができます。

だから例えば下記の設定もできます。

const state = reactive({
  count: 0,
  point: {
    math: 1,
    english: 2
  }
});

複数の値を設定するのに凄く便利だと思います。

ただテンプレートで使う場合・メソッドで使う場合のどちらでも「state.count」や「state.point.math」や「state.point.english」などと記述しないといけません。

「.value」は使いません。

refとreactiveの大きな違い

下記だと思います。

  • ref : 初期値を1つしか設定できない。
  • reactive : 変数をオブジェクトでまとめて設定できる。