vue.jsのチュートリアルを整理していく

Vue.jsの公式ドキュメントを読んでいるが、なんかよくわかんないということで、記事にしながら整理することにした。
公式ドキュメント→https://ja.vuejs.org/guide/introduction.html

単一ファイルコンポーネント

HTML,CSS,Javascriptをまとめて持っている一つのファイル。Vue独自のもので、SFCともいわれる。見た目がHTMLファイルっぽいが、HTMLではない。拡張子は「.vue」。
↓単一ファイルコンポーネントの例

test.vue

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

補足）コンポーネントとは？
英語でcomponent。大雑把にいえばプログラムの部品。VueみたいなGUI設計では画面に表示される一つ１つのボタンやテキストボックス周りのプログラムを指す。
詳しくはggrks

２つのAPIスタイル

Vue.jsでは「Options API」と「Composition API」の2つのAPIスタイルを選択できる。

Options API

PythonやJavaなどのオブジェクト指向プログラミング言語を使っている人は使いやすいAPI。Composition APIに比べると初心者向き。

↓Option APIの例

OptionAPI.vue

<script>
export default {
  // data() で返すプロパティはリアクティブな状態になり、
  // `this` 経由でアクセスすることができます。
  data() {
    return {
      count: 0
    }
  },

  // メソッドの中身は、状態を変化させ、更新をトリガーさせる関数です。
  // 各メソッドは、テンプレート内のイベントハンドラーにバインドすることができます。
  methods: {
    increment() {
      this.count++
    }
  },

  // ライフサイクルフックは、コンポーネントのライフサイクルの
  // 特定のステージで呼び出されます。
  // 以下の関数は、コンポーネントが「マウント」されたときに呼び出されます。
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

公式のやつをそのまま張り付けているだけなので変なコメントがついているが、いらないよって人は気にしなくていい。
Option APIでは、まずオブジェクトを作り（上のプログラムではdefault）、そこにいろいろなオプションをつけていく（dataやmethodsなど）。
オブジェクト内のデータにオブジェクト内からアクセスするときにはthisを使う。

イメージとしては、クラスのなかにいろいろなインスタンスやメゾットがあるのと同じ感覚。

Composition API

Option APIより自由度が高いが少しムズい。

CompositionAPI.vue

<script setup>
import { ref, onMounted } from 'vue'

// リアクティブな状態
const count = ref(0)

// 状態を変更し、更新をトリガーする関数。
function increment() {
  count.value++
}

// ライフサイクルフック
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

ムズくて筆者もよくわかってないので、解説は割愛。
補足）APIとは？
アプリケーション・プログラミング・インターフェース（Application Programming Interface）のこと。プログラム同士をつないでいるもの。
詳しくはg((略

どっちのAPIがいいのか

どっちでもいい。
どちらも基本的な考え方は同じらしく、公式ドキュメントでも片方のAPIしか教えてあげないよみたいなことはしていない。