【Vue3】Composition APIでrefを取得する方法をOptions APIとの違いを見ながら解説！

今回はVue3から新たに追加された、Composition APIでのrefでの要素の取得方法について解説を行っていきます。

Options APIでは「this.$refs」で情報を取得することができましたが、Composition APIでは取得方法が少し異なります。

さっそく、Composition APIでのrefの取得方法について見ていきましょう。

詳しくはVueのドキュメントに書いてあります。

詳細を知りたい方は書きをチェック！

Vue ドキュメント

Vue3 refの所得方法：Composition API
Options APIでのrefの書き方
いろいろなrefの記述方法
1. 配列の定義
2. Boolean型の定義
まとめ
1. おすすめの参考書

Vue3 refの所得方法：Composition API

refを使えるようにするために、インポートをする
定数を定義し、refの受け取り口を作る
html側でrefの定義をする

<script setup>
import { ref, onMounted } from "vue";　// 1

const title = ref()　// 2

onMounted(() => {
  console.log(title.value)
  console.log(title.value.innerHTML) // タグ内の値を取得
  console.log(title.value.localName)　// tag名を取得
})
</script>

<template lang="html">
  <div>
    <h1 ref="title">タイトル</h1> // 3 
  </div>
</template>
<style></style>

IDを取得するよりもかなり記述量をへらすことができます。

注意点としては、変数名.valueと記述しないといけません。変数名だけを指定した場合は下記のような出力結果になります。

console.log(title)

↓ 出力結果

RefImpl {__v_isShallow: false, dep: undefined, __v_isRef: true, _rawValue: h1, _value: h1}

Options APIでのrefの書き方

Options APIでは「this.refs.ref名」の形で取得することができます。

JavaScriptに慣れている方は、記述に違和感を感じる方が多いのでは無いでしょうか？

やっていることは同じですが工程が少し異なります。

~~refを使えるようにするために、インポートをする~~
定数を定義し、refの受け取り口を作る
html側でrefの定義をする

の手順で定義を行って行きます。

<template lang="html">
  <div>
    <h1 ref='title'>タイトル</h1>
  </div>
</template>

  <script>
  export default {
    data() {
      return {
        title:''
      }
    },
    mounted() {
      console.log(this.$refs.title)
    },
    methods: {
    },
  }
  </script>

Vue2での、Options APIでの記述方法は下記記事で詳しく紹介をしているので、気になる方はチェックしてみてください。

【vue】refsの使い方-クラスやIDよりも場合によっては便利に使用することができる使い方を紹介

いろいろなrefの記述方法

配列の定義

const array = ref([])

配列の定義はref()のカッコの中にプログラムで配列の宣言をするときと同様に「[]」を記述するだけで配列の定義ができます。

このときの注意点としては「’’（シングルクォーテーション）」、「””（ダブルクォーテーション）」で囲ってはいけません。シングルクォーテーションやダブルクォーテーションで囲ってしまうとテキストとして認識されてしまうためです。

配列を使ったコード例

Todo管理のコードを例に紹介します。

下記の手順で作成しています。

変数の定義
Todoを追加できるようにテキストボックスを用意する
配列へテキストボックスに入力した値を追加する関数を準備
追加ボタンの設置
v-forを使って配列を表示する

<template>
  <div>
    <p>タスクを追加</p>
    <p>{{ newTodo }}</p>
    <input type="text" name="todo" v-model="newTodo" />　// 2
    <button @click="addTodo">追加</button> // 4
    <ul>
      <li v-for="todo in array" :key="todo.index">{{ todo }}</li> // 5
    </ul>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    const array = ref([]); // 1 変数の定義　配列
    const newTodo = ref(); // 1 変数の定義　空の変数

    const addTodo = () => { // 3
      array.value.push(newTodo.value); 
    };

    return {
      array,
      newTodo,
      addTodo,
    };
  },
};
</script>

<style lang="css"></style>

Boolean型の定義

const boolean = ref(true);

配列の定義のときは「[]」を記述しましたが、booleanの定義のときは、「true」,「false」を記述します。

この時、配列の定義と同様に「’’（シングルクォーテーション）」、「””（ダブルクォーテーション）」で囲ってはいけません。

Boolean型を使ったコード例

スコアを入力したときに、50以上であれば合格、それ以外は不合格とする処理を書いていきます。

変数の定義
スコアを追加できるようにテキストボックスを用意する
結果表示用のボタンの設置
テキストボックスに入力した値の判定をする関数を準備
v-ifを使ってbooleanに入っている真偽によって表示を変更

<template>
  <div>
    <p>あなたの点数は何点ですか？</p>
    <input type="number" v-model="score" />
    <button @click="judge">結果を表示</button>
    <p v-if="boolean">合格です。</p>
    <p v-else-if="boolean == null"></p>
    <p v-else>不合格です。</p>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    const boolean = ref();
    const score = ref();

    const judge = () => {
      if (score.value < 50) {
        boolean.value = false;
      } else {
        boolean.value = true;
      }
    };

    return {
      score,
      boolean,
      judge,
    };
  },
};
</script>

まとめ

今回は、Composition APIでのrefの記述方法について学んで行きました。

Options APIとは記述方法が大きく異なるので、なれるまでは少し時間がかかると思いますがComposition APIのほうが可読性が上がるので、少しずつなれて行きましょう。

Vue3 refの定義

<script setup>
import { ref } from "vue";

const title = ref()
</script>

html

<h1 ref="title">タイトル</h1>

IDやクラスを付与する感覚で定義することが可能です。