MENU
SwiftUI/Flutter/Vue等でアプリ開発
  1. ホーム
  2. dev
  3. Vue
  4. [Vue] Vue3について知ろう

[Vue] Vue3について知ろう

Vue

Vue 3は、2020年にリリースされたVue.jsの最新バージョンです。Vue.jsは、JavaScriptのフレームワークの1つであり、UIの構築に特化したものです。Vue 3は、Vue.jsの前バージョンであるVue 2と比較して、パフォーマンスの向上、TypeScriptのサポート、Composition APIといった新機能が追加されています。

目次

Vue 3の導入方法

Vue 3を導入するには、以下の手順を実行します。

1. Vue CLIのインストール

Vue 3を使用する場合、Vue CLIが必要です。Vue CLIをインストールするには、ターミナルまたはコマンドプロンプトを開き、以下のコマンドを実行します。

npm install -g @vue/cli

2. Vueプロジェクトの作成

Vue CLIをインストールしたら、Vueプロジェクトを作成します。以下のコマンドを実行します。

vue create my-project

ここで、”my-project”はプロジェクトの名前です。プロジェクト名は任意の名前で構いません。コマンドを実行すると、Vue CLIがプロジェクトの作成を始めます。いくつかの質問に答えた後、プロジェクトが作成されます。

3. Vue 3のインストール

プロジェクトを作成したら、Vue 3をインストールします。以下のコマンドを実行します。

npm install vue@next

このコマンドで、Vue 3がプロジェクトに追加されます。

4. Composition APIの使用

Vue 3では、Composition APIが追加されました。Composition APIを使用するには、以下の手順を実行します。

4.1. setup関数の作成

まず、コンポーネントのsetup関数を作成します。setup関数は、コンポーネントが初期化される前に呼び出される関数です。

import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    // ...
  },
})

4.2. reactive関数の使用

次に、reactive関数を使用して、状態を定義します。reactive関数は、Vue 3で追加された関数で、オブジェクトをリアクティブにします。

import { defineComponent, reactive } from 'vue'

export default defineComponent({
  setup() {
    const state = reactive({
      count: 0
    })

    return {
      state
    }
  }
})

この例では、状態を定義しています。この状態は、countプロパティを持つオブジェクトであり、初期値は0です。reactive関数によって、オブジェクトがリアクティブになります。

4.3. computed関数の使用

computed関数を使用すると、算出プロパティを定義できます。computed関数は、Vue 2と同様に、リアクティブであり、必要に応じて再評価されます。

import { defineComponent, reactive, computed } from 'vue'

export default defineComponent({
  setup() {
    const state = reactive({
      count: 0
    })

    const doubleCount = computed(() => state.count * 2)

    return {
      state,
      doubleCount
    }
  }
})

この例では、doubleCount算出プロパティを定義しています。この算出プロパティは、state.countプロパティの2倍を計算します。

4.4. watch関数の使用

watch関数を使用すると、リアクティブな値の変更を監視できます。watch関数は、Vue 2のwatchオプションと同様の機能を持ちます。

import { defineComponent, reactive, watch } from 'vue'

export default defineComponent({
  setup() {
    const state = reactive({
      count: 0
    })

    watch(
      () => state.count,
      (newValue, oldValue) => {
        console.log(`count changed from ${oldValue} to ${newValue}`)
      }
    )

    return {
      state
    }
  }
})

この例では、state.countプロパティの変更を監視して、変更があった場合にコンソールにログを出力するwatch関数を定義しています。

まとめ

Vue 3は、パフォーマンスの向上、TypeScriptのサポート、Composition APIなどの新機能が追加されています。Vue 3を使用するには、Vue CLIをインストールして、Vueプロジェクトを作成し、Vue 3をインストールします。Composition APIを使用する場合は、setup関数、reactive関数、computed関数、watch関数などを使用します。Vue 3を使いこなすためには、これらの機能を理解し、適切に使用することが重要です。

Vue
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！
目次