28 回閲覧されました

みなさんこんにちは、jonioです。

今回はVue.js3のComposition APIについてのメモの記事になります。

Composition APIとは

下記のコードで考えます。

<template>
  <div>
    <input v-model="name" type="text" placeholder="名前を入力してください">
    <p>こんにちは、{{ name }} さん！</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const name = ref('');

    return {
      name
    };
  }
}
</script>

Vue2までは「data」・「methods」・「computed」などを分けて書いていましたがVue3から12行目のsetup関数の中にまとめて書くことができました。

Vue3用の書き方って感じです。

ref

9行目に見慣れない「ref」があります。

これはリアクティブ（値が変更になったら画面を再描画する為の変数）な値を設定できるようにする為にあります。

13行目でnameの初期値を設定しています。

「ref(‘ ‘)」と記述していますが初期値が空っぽという意味です。

空の配列を設定するなら「ref([ ])」と記述します。

returnの意味

returnの中にオブジェクトの形でVueのテンプレートで使いたい変数を記述します。

今回はnameを記述していますがこれがあることでテンプレートの「{{ name }}」で使うことができます。