🟡

【Vue.js】リアクティブとは

2025/05/07に公開

リアクティブ

`ref()`

カウントアップのボタンが押される（click）と数値（count）が増える（increment）

countという変数をref関数で監視している

<template>
  <p>カウント: {{ count }}</p>
  <button @click="increment">+1</button>
        //　↑ ボタンにクリックアクションが行われた際にincrement関数が呼び出されるよう指定　　
</template>

<script setup>
// import文でref関数を使用するという宣言を行う 
import { ref } from 'vue'

// 初期値が0であると宣言
// 「数値」「文字列」「Boolean」など、1つのデータを使いたいときに使う。
const count = ref(0)

// ボタンがクリックされると以下の処理が実行される
const increment = () => {
  count.value++  // 表示・操作するときは .value が必要
}
</script>

`reactive()`

名前変更のボタンが押された際に、配列の値を変更する

reactive() を使うことで、user.nameやuser.ageの個別のプロパティがVueにより監視される

<template>
  <p>名前: {{ user.name }}</p>
  <p>年齢: {{ user.age }}</p>
  <button @click="changeName">名前変更</button>
    //　↑ ボタンにクリックアクションが行われた際にchangeName関数が呼び出されるよう指定
</template>

<script setup>
// import文でreactive関数を使用するという宣言を行う 
import { reactive } from 'vue'

// 複数のデータをまとめて管理したいときに便利
const user = reactive({
  name: '山田',
  age: 25
})

// 山田　→　田中へ変更
const changeName = () => {
　user.name = '田中'
　user.age = 30
}
</script>

リアクティブ

ref()

reactive()

Discussion

`ref()`

`reactive()`