・Vue.jsのrefやreactiveってどう使うの？
こんな疑問にお答えします。
Vue３ではrefやreactiveを用いて、リアクティブなデータ管理を行えます。
今回refとreactiveの使い方や違いを自分用のメモとしてまとめてみました。
参考にどうぞ
ということで、この記事では「Vue.jsのrefとreactiveの使い方」について解説していきます！
Vue.jsの「ref」と「reactive」の使い方
目次
【解説】Vue.jsの「ref」の使い方【リアクティブ】
まず「ref」について見ていきましょう。
- refとは？
- refの使い方
- refのデータにアクセスする方法
順に解説してきます。
refとはリアクティブな値を作成するVue.jsの機能。
リアクティブとは「値が監視されていて、変更があると検知される状態」です。
つまり定義した変数の値が変化したら、それに連動して表示内容も変わるという仕組みですね。
主に単一の値や参照にて扱われます。
使い方は「ref()関数」をインポートしてきて、リアクティブにしたい値をref()で指定します。
下記コードのように↓
<script setup>
// ref関数をインポート
import { ref } from "vue";
// ref()の中に値を指定
const name = ref('Sato')
</script>これでnameという変数が、リアクティブな値で扱われるようになります。
上記例だと初期値は「Sato」ですね。
refを使ってリアクティブにした値に、アクセスするには注意点が必要です。
それはscriptタグ内と、templateタグ内ではアクセス方法が変わるということ。
scriptタグ内では「value」プロパティを使って、ref内のデータにアクセスします。
<script setup>
import { ref } from "vue";
const name = ref('Sato')
// .valueを使ってアクセスする
console.log(name.value)
</script>templateタグ内では、通常通りマスタッシュ構文を使ってref内のデータにアクセスします。
<template>
<p>私の名前は {{ name }}</p>
</template>
【解説】Vue.jsのマスタッシュ構文の使い方【コードあり】 【解説】Vue.jsの「reactive」の使い方【リアクティブ】
続いて「reactive」について見ていきましょう。
- reactiveとは？
- reactiveの使い方
- reactiveのデータにアクセスする方法
順に解説してきます。
reactiveとはリアクティブなオブジェクトを作成するVue.jsの機能。
リアクティブとは「値が監視されていて、変更があると検知される状態」です。
refと違うのが、オブジェクト全体を扱うのが特徴です。
そのため複雑なデータ構造を扱うときに便利。
文字列や数値などは指定ができないので注意しましょう。
使い方は「reactive()関数」をインポートしてきて、リアクティブにしたい値をreactive()で指定します。
<script setup>
// reactive関数をインポート
import { reactive } from 'vue';
// reactive()の中にオブジェクトデータを指定
const dinner = reactive({
drink: 'water',
food: 'pizza',
dessert: 'ice cream'
});
</script>先述したように文字列等は指定できないので、オブジェクトデータ等を使います。
refと違いreactiveのデータにはvalueプロパティを使わずに、直接アクセスすることができます。
下記コードのように↓
<script setup>
import { reactive } from 'vue';
const dinner = reactive({
drink: 'water',
food: 'pizza',
dessert: 'ice cream'
});
// データにアクセス
console.log(dinner.food);
</script><template>
<p>今夜のデザートは {{ dinner.dessert }}でした。</p>
</template>【解説】Vue.jsの「ref」と「reactive」の使い方【リアクティブ】：まとめ
- 「refと」はリアクティブな値を作成するVue.jsの機能
- 「ref()関数」をインポートしてきて、リアクティブにしたい値をref()で指定
- scriptタグ内では「value」プロパティを使って、ref内のデータにアクセスする
- 「reactive」とはリアクティブなオブジェクトを作成するVue.jsの機能
- 「reactive()関数」をインポートしてきて、リアクティブにしたい値をreactive()で指定
「ref」や「reactive」を使う時はためしてみてね！
