はじめに
今回は新しく導入された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を使ったか書き方に挑戦するのも良いかもしれませんね。