2023.01.20 2023.01.31

【Vue3】reactiveでリアクティブ。まとめてリアクティブを作ろう。

momeq

モー

今回はvueでのreactiveを確認していきます。使い方は簡単です。早速みていきましょう。

Vue3でリアクティブな使い方をするためのreactive関数。単純に変数を使うならば、refの方が多いかもしれませんね。

参考：refの使い方

でも、reactiveもしっかりと使えるので、きちんと使い分けができるようにしておきましょう。

一言で言うと、refは変数を定義するならば、reactiveはオブジェクトを定義でき、まとまりで管理可能となっています。

Contents

基本的な使い方
実際のコードで確認
プログラミングを学ぶならTechAcademy（テックアカデミー）がおすすめ！

基本的な使い方

まずは、reacriveの使い方を確認します。

インポート

import {reactive} from “vue”;

定義

const 変数名 = reactive({

データ1: 初期値,

データ2: 初期値,

データ3: 初期値

})

アクセス

変数名.データ1

変数名.データ2

変数名.データ3

ニャー

reactive()で囲ってるだけのオブジェクトなんだにゃ。これだけで、使えるなら簡単だにゃ。

大切なことは、オブジェクトのようにまとまりで管理できる点です。

名前、年齢、住所などのまとまりを作り場合は、refよりreactiveでオブジェクトを使うといいと感じます。

こんな方法もあるんだなと覚えておいてほしいところですね。

実際のコードで確認

モー

実際のコードで確認しておきましょう。

間違いやすいところとしては、使う際にrefのように.valueをつけないことです。

refからreactiveに変える時などにエラーにならないように注意ですね。

<script setup lang="ts">
  import {reactive, computed} from "vue";　//インポート
  const user = reactive({ 　　　//定義
    first_name: "",
    family_name: ""
  })
  const name_union = computed(() => {
    return user.first_name + " " + user.family_name; //アクセス
  })
</script>

<template>
  <div class="container"> 
    <p><span>名</span><input type="text" v-model="user.first_name"></p>
    <p><span>姓</span><input type="text" v-model="user.family_name"></p>
    <p>{{name_union}}</p>
  </div>
</template>

<style scoped>
  .container{
    width: 100%;
    text-align: center;
  }
</style>

参考：computedの使い方