JavaScript

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

reactiveの使い方
momeq
モー
モー

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

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

参考:refの使い方

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

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

基本的な使い方

まずは、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の使い方

プログラミングを学ぶならTechAcademy(テックアカデミー)がおすすめ!

TechAcademy [テックアカデミー]

モー
モー

独学で苦戦している人は、一度しっかりと基礎を学ぶと次のステップへ進めますよ。今のおすすめは、TechAcademy(テックアカデミー)ですね。

TechAcademyのおすすめポイント
  • オンラインで選抜された現役エンジニアから学ぶことができる
  • 自宅からWeb制作・プログラミング・アプリ開発など幅広い分野を学べる
  • 学ぶだけではなく、転職の支援、副業に活かせるスキルの習得、副業の仕事紹介まで行っている
ニャー
ニャー

無料体験や相談もあるから、一度試してみてもいいんだにゃ!

\無料体験、無料相談はこちらから/



記事URLをコピーしました