LoginSignup
3

More than 1 year has passed since last update.

posted at

updated at

[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()の中に書く
- そもそも datamethodsが無い。thisだって無い。
- returnの中に書き出して動かす

まとめ

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

備考

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
3