Vue Composition APIの使い方を解説！Vue2との違いと書き換え

2020年9月18日に「Vue.js v3.0」がリリースされ、その中でも特にVue Composition APIが注目されています。

Composition APIでは今まで慣れ親しんできたVue2の書き方から一新されてしまったため、「使い方が分からない」と思っている方も多いのではないでしょうか。

この記事では以下の公式ドキュメントを基に、Composition APIの基本的な使い方を解説していきます。

Vue Composition APIとは

Vue Composition APIとは以下の2点のために策定された関数ベースのAPIです。

今までのVue2でのOptions APIでは1つのコンポーネントが複数の役割を持った際にコードが肥大化し、可読性が著しく低下するという問題がありました。

そこでComposition APIでは関心事によってコードを分割し、分割したコードを簡単にコンポーネントに注入できるようになっています。

詳しくは以下の記事で解説していますので、気になる方は是非ご覧ください。

関連記事

Vue Composition APIのメリットを解説！Options APIとComposition APIの違い

2020年9月18日に「Vue.js v3.0」がリリースされ、その中でも特にVue Composition APIが注目されています。 Composition APIの使い方が分かったあとは、なぜ使うのかというところが気になりますよね。[…]

Vue Composition APIの使い方

ここからは以下の項目について解説していきます。

data

Options APIではリアクティブな変数を定義するためにdataオプションを使用していましたが、Composition APIではref・reactiveという関数を使用します。

公式ドキュメントでは以下で説明されています。

Options API

<template>
  <div>{{ count }}</div>
</template>
<script>
export default {
  data() {
    return {
      count: 1,
    };
  },
};
</script>

こちらは既に見慣れた書き方ですね。
dataオプションでリアクティブな値を定義しています。

Composition API

Composition APIでは以下の手順でリアクティブな変数を定義します。

Composition APIでは基本的にsetup関数内で必要なものを定義してreturnします。

<template>
  <div>{{ countRef }}</div>
  <div>{{ obj.count }}</div>
</template>

<script>
import { ref, reactive } from "vue";
export default {
  setup() {
    // refまたはreactiveを使用して
    // リアクティブな変数を生成します
    const countRef = ref(1);
    const obj = reactive({
      count: 2,
    });
    return {
      countRef,
      obj,
    };
  },
};
</script>

<style>
</style>

Vue3からはtemplate内に1つのルート要素を置くという制約は無くなりました。

template内でこのrefとreactiveで生成したリアクティブな変数にアクセスする際には以下の点に注意してください。

refはプリミティブ、reactiveはオブジェクトのようなイメージですね。
今回のコードでは以下の部分です。

<template>
  <div>{{ countRef }}</div>
  <div>{{ obj.count }}</div>
</template>

なるほど、でもこのrefとreactiveはどうやって使い分けるんだろう。。。

実はこのrefとreactiveの使い分け方を決めるのは時期尚早であると公式ドキュメントで言及されています。

詳しくはこちらの記事で解説していますので、気になる方はぜひご覧ください。

関連記事

Vue Composition APIのrefとreactiveを解説！違いと使い分け

2020年9月18日に「Vue.js v3.0」がリリースされ、その中でも特にVue Composition APIが注目されています。 Vue Composition APIではリアクティブな変数を定義する際にrefかreactiveを[…]

まとめ

methods

Options APIではmethodsオプションを使用して関数を定義していましたが、Composition APIではsetup関数から関数をreturnするだけでtemplate内で使用できるようになります。

以下で違いを見ていきましょう。

Options API

<template>
  <div>
    <button @click="decrement">-</button>
    {{ count }}
    <button @click="increment">+</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 1,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    },
  },
};
</script>

Options APIではmethodsオプションの中に関数を定義していました。

Composition API

Composition APIでは以下の手順で関数を定義します。

template内ではOptions APIと同じように使用できます。

<template>
  <!-- template内での使い方はOptions APIと同じです -->
  <button @click="decrement">-</button>
  {{ countRef }}
  <!-- template内での使い方はOptions APIと同じです -->
  <button @click="increment">+</button>
</template>

<script>
import { ref } from "vue";
export default {
  setup() {
    const countRef = ref(0);
    // 通常の関数と同じように定義します
    const decrement = () => {
      countRef.value--;
    };
    // 通常の関数と同じように定義します
    const increment = () => {
      countRef.value++;
    };
    return {
      countRef,
      decrement,
      increment,
    };
  },
};
</script>

<style>
</style>

template内でcountRefの値を表示しています。

また、「-ボタン」と「+ボタン」からdecrement関数とincrement関数を呼び出してcountRefの値を増減させています。

今回のようにrefで定義した変数を操作する場合には以下の点に注意してください。

今回のコードでは以下の部分です。

const decrement = () => {
  countRef.value--;
};
const increment = () => {
  countRef.value++;
};

まとめ

computed

Options APIで計算プロパティを定義するためにcomputedオプションを使用していましたが、Composition APIではcomputed関数を使用します。

公式ドキュメントでは以下で説明されています。

Options API

<template>
  <div>
    {{ count }}
    <div>2倍すると: {{ doubleCount }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 1,
    };
  },
  computed: {
    doubleCount() {
      return this.count * 2;
    },
  },
};
</script>

Options APIではcomputedオプションで計算プロパティを定義していました。

Composition API

Composition APIでは以下の手順で計算プロパティを定義します。

template内ではOptions APIと同じように使用できます。

<template>
  {{ countRef }}
  <div>2倍すると: {{ doubleCount }}</div>
</template>

<script>
import { ref, computed } from "vue";

export default {
  setup() {
    const countRef = ref(1);

    // computed関数を使用して計算プロパティを定義します
    const doubleCount = computed(() => {
      return countRef.value * 2;
    });

    return {
      countRef,
      doubleCount,
    };
  },
};
</script>

<style>
</style>

template内でcountRefとcountRefの値を2倍にするdoubleCountを表示しています。

今回はcountRefを増減させるような処理は用意していませんが、実際にcountRefの値を増減させるとdoubleCountがそれに反応してcountRefの2倍の値を表示します。

まとめ

props・emit

props・emitといえば親子間でのデータの受け渡しです。

Options APIではpropsオプションと$emit関数によって実現していましたが、Composition APIではsetup関数に渡されるpropsとcontextを使用します。

公式ドキュメントでは以下で説明されています。

Options API

<template>
  <div>
    <ChildComponent :count.sync="count" />
  </div>
</template>

<script>
import ChildComponent from "@/components/ChildComponent";

export default {
  components: {
    ChildComponent,
  },

  data() {
    return {
      count: 1,
    };
  },
};
</script>

<template>
  <div>
    {{ count }}
    <button @click="increment">+</button>
    <div>2倍すると: {{ doubleCount }}</div>
  </div>
</template>

<script>
export default {
  props: {
    count: {
      type: Number,
      required: true,
    },
  },

  computed: {
    doubleCount() {
      return this.count * 2;
    },
  },

  methods: {
    increment() {
      this.$emit("update:count", this.count + 1);
    },
  },
};
</script>

propsオプションで親コンポーネントから値を受け取って、$emitで親コンポーネントにイベントを送出していました。

今回は子コンポーネントから送られてきた値を親コンポーネント側で更新するだけなので.syncを使用しています。

Composition API

Composition APIでは以下の手順で親子間でデータを受け渡します。

<template>
  <ChildComponent v-model:count="countRef" />
</template>

<script>
import { ref } from "vue";
import ChildComponent from "@/components/ChildComponent";

export default {
  components: {
    ChildComponent,
  },

  setup() {
    const countRef = ref(1);

    return {
      countRef,
    };
  },
};
</script>

<style>
</style>

<template>
  {{ count }}
  <button @click="increment">+</button>
  <div>2倍すると: {{ doubleCount }}</div>
</template>

<script>
import { computed } from "vue";

export default {
  props: {
    count: {
      type: Number,
      required: true,
    },
  },

  setup(props, context) {
    // propsに親コンポーネントから渡されたデータが格納されています
    const doubleCount = computed(() => {
      return props.count * 2;
    });

    const increment = () => {
      // contextにemitが用意されています
      context.emit("update:count", props.count + 1);
    };

    return {
      increment,
      doubleCount,
    };
  },
};
</script>

<style>
</style>

ここまでは使用してきませんでしたが、setup関数は引数を2つ受け取ります。
第1引数がprops、第2引数がcontextです。
第1引数のpropsには親コンポーネントから渡されたデータが格納されています。

propsには分割代入を使用しないように注意してください。
リアクティビティが失われてしまいます。

// propsに分割代入を適用すると
// リアクティビティが失われてしまいます
setup({ count }) {
}

第2引数のcontextにはOptions APIでVueインスタンスに用意されていたemit・attrs・slotsが格納されています。

今回はcontext.emitで親コンポーネントにイベントを送出しています。

contextはpropsと違って分割代入を使用しても問題ないので、以下のように書くことも可能です。

setup(props, { emit }) {
    const increment = () => {
      emit("update:count", props.count + 1);
    };
}

あとは親コンポーネント側で従来通り、子コンポーネントからのイベントをハンドリングすればOKです。

Vue 3からは.syncは廃止されているので、変わりにv-model:xxxを使用しています。

今回の例のようにv-model:countとして子コンポーネントに渡すと、親コンポーネント側で更新用の関数を用意しなくても子コンポーネントからupdate:countイベントが送出されてくれば、勝手に更新してくれます。

<template>
  <ChildComponent v-model:count="countRef" />
</template>

まとめ

watch

Options APIではwatchオプションを使用してリアクティブな変数を監視していましたが、Composition APIではwatch関数を使用します。

公式ドキュメントでは以下で説明されています。

Options API

<template>
  <div>
    {{ count }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 1,
    };
  },

  watch: {
    count(count, prevCount) {
      console.log(count);
      console.log(prevCount);
    },
  },
};
</script>

Options APIではwatchオプションでリアクティブな変数を監視していました。

Composition API

Composition APIでは以下の手順でリアクティブな変数を監視します。

<template>
  {{ countRef }}
</template>

<script>
import { ref, watch } from "vue";

export default {
  setup() {
    const countRef = ref(1);

    // watch関数でリアクティブな変数を監視します
    watch(countRef, (count, prevCount) => {
      console.log(count);
      console.log(prevCount);
    });

    return {
      countRef,
    };
  },
};
</script>

<style>
</style>

この例では以下のようにリアクティブな変数が監視されます。
※実際にcountRefの値を変更する処理は用意していません

watchの第1引数には監視対象、第2引数にはcallback関数を渡します。
callback関数の第1引数には変更後の値、第2引数には変更前の値が渡されます。

watch(
      /** 監視対象 **/
      /** callback関数 **/
    );

第1引数の監視対象には以下の関数で生成したリアクティブな変数を渡すことができます。

今回の例ではrefで生成したリアクティブな変数を第1引数に渡しています。

computedもrefと同じように動作しますが、reactiveの場合は全てのプロパティが監視対象となります。

以下の例ではnameとobjが監視対象になります。

const obj = reactive({
  name: "",
  count: 1,
});
watch(
    obj /** nameとobjが監視対象になる **/,
    (obj, prevObj) => {
      console.log(obj);
    }
);

もし監視対象のプロパティを絞りたい場合には、以下のように変更したいプロパティを返す関数を第1引数に渡します。

以下の例ではnameが監視対象になります。

const obj = reactive({
  name: "",
  count: 1,
});
watch(
  () => obj.name /** nameが監視対象になる **/,
  (name, prevName) => {
    console.log(name);
  }
);

またwatchは複数のリアクティブな変数を同時に監視することができます。

この場合は以下のように第1引数に配列を渡します。
第2引数のcallback関数にもそれぞれの変更前、変更後の値が渡されます。

const fooRef = ref(1);
const barRef = ref(1);

watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
  console.log(foo);
  console.log(bar);
  console.log(prevFoo);
  console.log(prevBar);
});

複数を監視対象とした場合には、いずれかが変更された場合にcallback関数が呼ばれます。

watch(
  props,
  (newProps, oldProps) => {
    console.log(newProps);
  }
);

もちろん以下のようにpropsの1つのプロパティに監視対象を限定することもできます。

watch(
  () => props.count,
  (count, prevCount) => {
    console.log(count);
  }
);

ここまでリアクティブな変数を監視する方法を見てきましたが、もちろん監視を停止することも可能です。

監視を停止したい場合にはwatchから停止用の関数が返されるので、その停止用関数を呼び出します。

const stop = watch(countRef, (count, prevCount) => {
  console.log(count);
});

// 監視を停止
stop();

まとめ

refs

Options APIではtemplate内の要素またはコンポーネントを参照する際にvm.$refsを使用していましたが、Composition APIではここまで使用してきたrefとvm.$refsが統合されています。

Vue2で使っていたrefsは「template refs」、 Vue3のrefは「reactive refs」と呼ばれています。

Options API

<template>
  <div ref="root"></div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$refs.root);
  },
};
</script>

Options APIでは$refsを使用してtemplate内でバインドした要素・コンポーネントを参照していました。

Composition API

Composition APIでは以下の手順で要素・コンポーネントを参照します。

<template>
  <div ref="root"></div>
</template>

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

export default {
  setup() {
    const root = ref(null);

    onMounted(() => {
      console.log(root.value);
    });

    return {
      root,
    };
  },
};
</script>

この例では、divタグにref=”root”としています。

setup関数内でrefを用いて同名のrootを定義しているので、このrootにdivがバインドされます。

この対応するrefへの割り当てタイミングは初回レンダリング後なので、onMountedで初めてアクセスできるようになります。

まとめ

ライフサイクルフック

Options APIではcreatedやmountedオプションを使用してライフサイクルフックを定義していましたが、Composition APIではそれぞれのライフサイクルに対応したonXXX関数を使用します。

公式ドキュメントでは以下で説明されています。

Options API

<template>
  <div></div>
</template>

<script>
export default {
  created() {
    console.log("created");
  },

  mounted() {
    console.log("mounted");
  },
};
</script>

ここではcreated・mountedのみ定義していますが、Options APIではそれぞれのライフサイクルに対応したオプションを使用していました。

Composition API

Composition APIでは以下の手順でライフサイクルフックを定義します。

beforeCreate・createdはsetup関数にまとめられています。

<template>
  <div></div>
</template>

<script>
import { onMounted } from "vue";

export default {
  setup() {
    console.log("created");

    onMounted(() => {
      console.log("mounted");
    });
  },
};
</script>

<style>
</style>

今回のコードではmountedに対応したonMountedを使用していますが、他のライフサイクルフックも同様に定義できます。

以下がOptions APIとComposition APIのライフサイクルフックの対応表です。

まとめ

まとめ

今回はComposition APIの基本的な使い方を見てきました。

ここまで読んでいただいた方はComposition APIの基本的な使い方を理解していただけたかと思います。

確かに使い方は分かったけど、なんでOptions APIじゃなくてComposition APIを使うことが推奨されているんだろう。。。

冒頭でも少し触れましたが、Composition APIのメリットは可読性・再利用性の向上や型インターフェースの改善です。

このあたりに関しては以下の記事で解説していますので、気になる方は是非ご覧ください。

関連記事

Vue Composition APIのメリットを解説！Options APIとComposition APIの違い

2020年9月18日に「Vue.js v3.0」がリリースされ、その中でも特にVue Composition APIが注目されています。 Composition APIの使い方が分かったあとは、なぜ使うのかというところが気になりますよね。[…]

それでは、ここまでご覧いただきありがとうございました。