導入の背景

従来のAPIではdata, computed, methodsなどのオプションに合わせてコードを分割する必要があり

一つのロジックに関連したコードでも離れた位置に記述しなければなりませんでした。

コードが大きくなるにつれ、離れた位置にある各オプションを行き来する負担が生じます。

この負担を解消するために導入されたのがComposition APIです

setupオプション

新たに導入されたsetupオプションについて

export default {
  props: {
    msg: { type: String }
  },
  setup(props) {
    console.log(props) // { msg: '' }

    return {} // setupが返すオブジェクトの中に含まれる変数はsetupを抜けた後も使用可能になります
  }
}

setupオプションを指定するとコンポーネントが生成される前にsetupの中身が実行されます。

コンポーネントの生成前なのでsetup内部ではthisは使用できません。

propsはsetupの引数に指定することで参照することができます。

上の例ではpropsにmsgというString型の値を渡していればコンソールに渡した値が表示されます。

setupの使用例

<template>  // Vue 3ではtemplate直下に複数の要素を書くことができます
  <div>{{ counter }}</div>
  <button @click="countUp">+</button>
</template>

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

  export default {
    setup() {
      const counter = ref(0); // refを使用することでリアクティブな変数を作成できます
      const countUp = () => { counter.value++; }; 

      return {
        counter,
        countUp // template内部で使用したい変数などをreturnします。
      } 
    }
  }
</script>

refは引数の値を包んだオブジェクトを返します。

引数として渡した値は、refが返すオブジェクト内部のvalueプロパティからアクセスできます。

そのため上記の例でcounterを増やしたい場合はcounter.valueで値にアクセスします。