2023.01.17 2023.01.31

【Vue3】ref関数！Composition APIでのリアクティブな作り方！

momeq

モー

今回は、vue3のComposition APIでリアクティブな変数を作っていきます。

これまでのoptions APIと異なり、「ref」をインポートする必要があります。

Vue３のバージョンが上がり、少しリアクティブの使い方が変わりました。

options APIとかvue２だと「data」を使っていたのですが、今の書き方だとシンプルに書けるようになり、dataは使いません。

リアクティブなシステムはvueには不可欠なので、新しく導入されている「ref」については、是非覚えてくださいね。

Contents

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

基本的な使い方

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

インポート

import {ref} from “vue”

変数の宣言

const 変数名 = ref<型>(初期値)

変数へのアクセス

変数名.value

ニャー

基本はこれだけだにゃ。インポートして、変数にしたい値をrefで囲うだけだにゃ。

あとは、アクセスするときはvalueでアクセスするから、忘れちゃダメだにゃ。

実際のコードを確認

モー

参考になればと思い、いくつか基本的な使い方を載せておきます。

書き方は、vue3のComposition APIに準拠しています。

クリックイベント

<script setup lang="ts">
  import {ref} from "vue"  //インポート
  const number = ref<Number>(0);　//定義
  const handleClickAdd = () => number.value++; //値にアクセス
</script>

<template>
  <div class="container"> 
    <p>{{number}}</p>
    <button @click="handleClickAdd">add+</button>
  </div>
</template>

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

オン・オフ

<script setup lang="ts">
  import {ref} from "vue"　//インポート
  const open = ref<Boolean>(true); //定義
  const handleClickAdd = () => open.value = !open.value; //値にアクセス
</script>

<template>
  <div class="container"> 
    <button @click="handleClickAdd">click</button>
    <p v-if="open">open</p>
  </div>
</template>

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

リストに追加

<script setup lang="ts">
  import {ref} from "vue" //インポート
  const items = ref<Array<String>>([]); //定義
  const text = ref<String>(""); //定義
  const handleClickAdd = () => {
    items.value.push(text.value); //アクセス
  };
</script>

<template>
  <div class="container"> 
    <input type="text" placeholder="文字を入力" v-model="text">
    <button @click="handleClickAdd">Add</button>
    <ul>
      <li v-for="item in items" :key={item}>{{item}}</li>
    </ul>
  </div>
</template>

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

参考：reactiveの使い方