MENU
SwiftUI/Flutter/Vue等でアプリ開発
  1. ホーム
  2. dev
  3. Vue
  4. [Vue] Vue3 – Composition API – の Hooks を知ろう

[Vue] Vue3 – Composition API – の Hooks を知ろう

Vue

Vue 3のComposition APIは、従来のオプションベースのAPIに代わるもので、より直感的かつ再利用性が高いコードを書くことができます。Composition APIには、複数の関数に分割してコンポーネントのロジックを定義するためのHooksがあります。以下でいくつかの一般的なHooksを紹介します。

目次

setup()

Composition APIのエントリーポイントで、Vueコンポーネントのセットアップ時に呼び出されます。このHooksは、データ、メソッド、ウォッチャーなどの各種オプションを定義するための関数を返します。例えば、以下のように使用することができます。

import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      message: 'Hello, World!',
    });

    const showMessage = () => {
      alert(state.message);
    };

    return {
      state,
      showMessage,
    };
  },
};

reactive()

オブジェクトを反応型に変換し、そのプロパティへの変更を追跡できるようにします。Composition APIでは、通常、データの状態管理にこの関数を使用します。例えば、以下のように使用することができます。

import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      message: 'Hello, World!',
    });

    return {
      state,
    };
  },
};

computed()

Vueコンポーネントの算出プロパティと同じように、Composition APIの算出関数を作成するために使用されます。これにより、計算されたプロパティを作成し、そのプロパティが依存するデータに変更があった場合に自動的に再計算されます。例えば、以下のように使用することができます。

import { computed, reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      message: 'Hello, World!',
    });

    const reversedMessage = computed(() => state.message.split('').reverse().join(''));

    return {
      state,
      reversedMessage,
    };
  },
};

watch()

オブジェクトや計算されたプロパティの変更を監視し、その変更に対するリアクションを定義するために使用されます。例えば、以下のように使用することができます。

import { reactive, watch } from 'vue';

export default {
  setup() {
    const state = reactive({
      message: 'Hello, World!',
    });

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

    return {
      state,
    }
  }
}

onMounted()

Vueコンポーネントがマウントされた後に実行される処理を定義するために使用されます。例えば、以下のように使用することができます。

import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('Component has been mounted');
    });

    return {};
  },
};

onUpdated()

Vueコンポーネントが更新された後に実行される処理を定義するために使用されます。例えば、以下のように使用することができます。

import { onUpdated } from 'vue';

export default {
  setup() {
    onUpdated(() => {
      console.log('Component has been updated');
    });

    return {};
  },
};

onUnmounted()

Vueコンポーネントがアンマウントされた後に実行される処理を定義するために使用されます。例えば、以下のように使用することができます。

import { onUnmounted } from 'vue';

export default {
  setup() {
    onUnmounted(() => {
      console.log('Component has been unmounted');
    });

    return {};
  },
};

これらのHooksを使用することで、コンポーネントのロジックを再利用可能かつ明確にすることができます。Composition APIは、Vue 3の新しい機能の1つであり、従来のオプションベースのAPIに代わって、より直感的なコードを書くことができます。

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