Vue.js, Composition APIについてまとめ #Vue.js

ずっとReactで開発してきましたが、最近転職した会社で４年ぶりにVueを触りました。
その復習とComposition APIは自分がVueを触っていた2018-2019年当時はまだなく、今回新しく学ぶ事になったので備忘録として記事にしました。

Vueの基本

まずプロジェクトの作り方
最新事情ではVue/CLIは不要で、create-vueというツールですぐにプロジェクトをセットアップできます。
（vue@2に変えればVue2のプロジェクトも作れます）

// 事前インストールは不要でこのコマンドを実行すればOK
npm init vue@3 my-vue3-project

Vueコンポーネント（.vueファイル）の構成
template：DOM要素
script：ロジック
style：CSS
の3つのトップレベル言語のブロックで構成。

データの受け渡し
親から子へprops downでデータを渡す
子から親へ$emit upでデータを渡す（カスタムイベント）
＝子供が親のデータを変えれなくしてる、親が子供のデータに依存するデータをもてない様にしてる

*子から親へのデータの受け渡しはemitじゃなくて、propsでメソッドを渡しても同じ

単方向データフローの原則に基づいてVueは作られてる
この制限をなくすとアプリケーションは複雑化してしまう！

親でAPIからデータを取得して、子コンポーネントに渡すスタイルはVueもReactも同じですね。

双方向データバインディング
v-model
v-modelを使うことで、画面上でフォームの入力値を変更するとコンポーネント内のデータも自動的に変更してくれる。

これはReactにはない、Vueの便利な機能です。

Composition APIとは

ざっくり言うとリアクティブな値やそれらに関連した処理をComposition APIのおかげで切り出して扱えるようになった。

Reactを例にとると、useStateなどのHookでロジックをカスタムフックに切り出せるようになったのと似ている。

ReactがClassコンポーネントから関数コンポーネント+Hookへ移行が加速したように、VueにおいてもComposition APIが現在は主流となっているそうです。

実際どう書くのか？
Composition APIでは基本的にsetup関数内で必要なデータ、処理をまとめて定義してreturnします。

setup関数内でref・reactiveを使用してリアクティブな変数を生成
ref・reactiveで生成したリアクティブな変数をsetup関数からreturn
template内でsetup関数からreturnしたリアクティブな変数を利用

import { ref, Ref, reactive } from '@vue/composition-api'
export default defineComponent({
  name: 'ComponentName',
  setup() {
    const message: Ref<string | null> = ref(null)
    const isHogeUsed: Ref<boolean> = ref(false)

    const state = reactive({
      title: '',
      message: '',
    })

    return {
      message,
      isHogeUsed,
      state
    }
  },
})

関数の定義
さらに、setUp関数内では、関数の定義を行えます(従来通りmethodsでもできる)

Computed
算出プロパティ
従来はComputedプロパティで行っていたこの処理もsetup関数内で行います。

リアクティブシステム

値を監視して、値が変わるとビューを書き換えてくれるリアクティブシステムがVueの重要な鍵です。

リアクティブなデータを扱うメソッド
reactive: オブジェクト
ref: 単一の値
どちらもリアクティブな値にするメソッドで、ReactのuseStateと似てます。

reactive, refで参照の仕方が違うので注意！！

// refはvalueプロパティが必要
const count = ref(0)
const onClick = () => {
  count.value += 1
}

// reactiveはvalueプロパティが不要
const data = reactive({
  current: 0
})
const onClick = () => {
  data.current += 1
}

取り急ぎ、簡単にまとめました。今後も随時追加していきます。