理系公務員のプログラミング日記

Composition API

Vue3 から新しく導入された Composition APIは、ごちゃごちゃしがちなVueのコンポーネントを整理する新しい書き方です。

独特な書き方のルールが多いVueですが、このComposition APIを使うことで生のJavaScriptに近い理解しやすい書き方を利用することができます。

従来の書き方(Options API)の場合

export default {
  data() {
    msg: 'Hello World';
  },
  methods: {
    sayHello() {
      console.log(this.msg);
    },
  },
};

Composition API の場合

import { ref } from 'vue';

export default {
  setup() {
    // data()に書いていた内容
    const data = ref({
      msg: 'Hello World',
    });

    // methodsに書いていた内容
    const sayHello = () => {
      console.log(data.value.msg);
    };

    // 定義したものをreturnする
    return {
      data,
      sayHello,
    };
  },
};

従来の書き方は,Options APIと呼ぶそうです。このOptions APIではdata()とmethods:{}に書いてた内容を、新しいComposition APIではsetup()にまとめて書くことができます。

setup()にまとめることで、data()とmethods:{}に書いていた内容は同じスコープになるため、書く機会の多かったthis.○○を一掃することができます。

なお、setup()で必要な内容を書いたら、最後にそれらをreturnする必要があります。

ここでrefというメソッドは、対象のオブジェクトの参照を作る働きをしており、それを変数名.valueという形でできるようになっています。

オブジェクトの参照ではなく、オブジェクトのコピーを作りたいときは、refの代わりにreactiveを使います。

このときは、上記のvalueを使う必要がなくなります。

CompositionAPI の reactive

import { reactive } from 'vue';

export default {
  setup() {
    // reactiveで定義
    const data = reactive({
      msg: 'Hello World',
    });

    const sayHello = () => {
      // valueが不要になった。
      console.log(data.msg);
    };
    return {
      data,
      sayHello,
    };
  },
};

CompositionAPIとpropsとemit

Vueを学ぶ過程で最初の難関になったのはコンポーネント間のデータのやり取り、いわゆる「props down, event up」でした。

このpropsとevent($this.emit())も、Composition APIの中で利用することができます。

thisが一掃されていることで、何がどのデータなのかが分かりやすくなりました。

contextは、コンポーネントに関する重要な情報をひとまとめにしたオブジェクトであり、そのcontextが持っているemitメソッドを使うことで、 従来方式のthis.$emitの代替として利用できます。

従来の書き方(Options API)

export default {
  props:{
    title:String
  }
  data() {
    msg: 'Hello World';
  },
  methods: {
    sayHello() {
      // propsで受け取ったtitleを表示
      console.log(this.title);
      // this.$emitでmsgを送る
      this.$emit('hello-event',this.msg)
    },
  },
};

Composition API

import { reactive, context } from 'vue';

export default {
  props: {
    title: String
  },
  setup(props,cotext) {

    const data = reactive({
      msg: 'Hello World',
    });

    const sayHello = () => {
      // propsでデータを受け取る
      console.log(props.title);
      // emitでmsgを送る
      context.emit('hello-event',data.msg);
    };

    return {
      data,
      sayHello,
    };
  },
};

CompositionAPIとライフサイクルフック(created,mountedなど)

Composition APIでは、createdやmountedなどのライフサイクルメソッドも表現できます。

というより、デフォルトでComposition APIはcreatedのタイミングで動作する仕様になっています。

created以外のmountedやupdateなどは、onMountedやonUpdateのように、 on〇〇という形で記載します。

従来の書き方(Options API)

export default {
  created(){
    console.log('Hello!');
  },
  mounted(){
    console.log('World');
  }
};

Composition API

import { onMounted } from 'vue'

export default {

  setup() {
    // createdはsetup()に直書き
    console.log('Hello');

    // mountedはonMounted()として呼び出され、コールバックを持たせる
    onMounted(() => {
      console.log('World')
    })
};