[Vue3]そんなに怖くなかったよ Composition API

こんにちわ。DiverseでフロントエンドしているNakazです。

さて、Vue3 が正式リリースしたので、今回最大の目玉であり関門のComposition APiを少し触ってみてました。
触ってみると、思ったよりは難しくないのかな（まだほんの触り程度なので）っていう印象だったので、初歩の初歩的な違いを書けたらなと思います。

作るもの

ボタンを押したら数字が増えるというシンプルなアプリです

HTML部

<div id="app">
  <div>{{count}}</div>
  <br>
  <span @click="onCount">count up!</span>
</div>

こちらは共通のコードを使っています。

従来のコード

Vue.createApp({
  data() {
    return {
      count: 0,
    }
  },
  methods: {
    onCount() {
      this.count++
    }
  }
}).mount("#app")

はい、よく見慣れたコードです。
もう見ただけで動き出しそうです。

Composition APIのコード

Vue.createApp({
  setup() {
    const count = Vue.ref(0)
    const onCount = () => {
      count.value++
    }
    return {
      count,
      onCount
    }
  }
}).mount('#app2')

見慣れなさすぎて戸惑いしか感じませんね。

大まかな違い

もはや全部違う感じではあるのですが
- 基本的な処理はsetupの中に書く
- リアクティブに変更していく変数はref()の中に書く
- そもそも dataやmethodsが無い。thisだって無い。
- returnの中に書き出して動かす

まとめ

どうでしたか？見慣れないは見慣れないですが、ちょっと書いてると不思議と理解度が上がってくると思います。
書くモチベーションがあったら、次はcomputedとreactive()の話でも書けたらと思います。

備考

• Vue3のCDNから書いたコードなので、Vue.ref()となっていますが、ビルド環境であればref()になります。
• そもそも Vue.createApp().mount()に変わった点は今回説明から省きました。