はじめに

今回は新しく導入されたComposition APIについて解説します！

動画でもコード付きで解説してるので、よろしければご視聴お願いします！

【YouTube動画】 Composition APIやsetup関数の使い方を一緒にみていきましょう！

Vue 2系と3系の書き方の違い

Vue2系でコンポネントを作るとき、以下のように書いてましたね。
定義場所と使う場所が離れているため、コードジャンプできないと、読むの辛いですね (できても見辛いですが...)。

export default {
  components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList },
  props: {
    user: { type: String }
  },
  data () {
    return {
      repositories: [],
      filters: { ... },
      searchQuery: ''
    }
  },
  computed: {
    filteredRepositories () { ... },
    repositoriesMatchingSearchQuery () { ... },
  },
  watch: {
    user: 'getUserRepositories'
  },
  methods: {
    getUserRepositories () {
      // using `this.user` to fetch user repositories
    },
    updateFilters () { ... },
  },
  mounted () {
    this.getUserRepositories()
  }
}

これがVue3系からこうなります！
dataとかがなくなった代わりに、setup関数が追加されていますね！

setup関数内に変数や関数を定義し、mountedやmethodsに対応するものを書いていきます。
setup関数のおかげで、同じデータを扱う処理をまとめることができます！！

また、setup関数の最後で定数などを返すと、template内で扱うことができます。

export default {
  components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList },
  props: {
    user: { type: String }
  },
  setup(props) {
    const test = ...
    console.log(props) // { user: '' }
    
    // setup関数内で定義したものを外 (<template>など) で使えるようにreturn
    return { test, ... }
  }
  ...
}

ビジュアルにまとめると以下のようになります。
左が今までのVue.jsの書き方で、右がComposition APIを使った場合の書き方です。
この画像では、アクセスするデータごとに色分けしています。

比較画像 Vue Composition API #code-organization

dataはどこにいった？

dataを使わない代わりに、refやreactiveが導入されました！

例えば、以下のように使います。

import { ref } from 'vue'

...
setup(props) {
  const counter = ref(0)

  console.log(counter) // { value: 0 }
  console.log(counter.value) // 0

  counter.value++
  console.log(counter.value) // 1
}

データを複数まとめたい場合はreactiveを使います。

import { reactive } from 'vue'

...
setup(props) {
  const counters = reactive({ x: 0, y: 0 })
}

ライフサイクル周りのメソッドは？

mountedなどのライフサイクル周りのメソッドはonMounted()などを読み込んで使います。

import { onMounted } from 'vue'
...

setup (props) {
  const getUserRepositories = ...

  onMounted(getUserRepositories)
  ...
}

まとめ

今回はVue 3.0のComposition APIについて紹介しました！
今までの書き方でも一応エラーにはならないですが、より読みやすいComposition APIを使ったか書き方に挑戦するのも良いかもしれませんね。

twitterやyoutubeでのコメントもお待ちしています！