Vue 3 のライフサイクル メソッド

導入

Vue 3 は進歩的な JavaScript フレームワークであり、開発者に動的でリアクティブな Web アプリケーションを構築するための堅牢なツール セットを提供します。 Vue の中核的な機能の 1 つは、開発者がコンポーネントのライフサイクルのさまざまな段階にフックできるライフサイクル メソッドです。これらのメソッドは、オプション API と構成 API の両方で使用できるため、コードの構造を柔軟に行うことができます。

この記事では、Vue 3 で利用可能なライフサイクル メソッドを調査し、Options API と Comboposition API での使用法を比較し、それらのアプリケーションを説明する実践的な例を示します。

コンテンツ

オプション API とコンポジション API

Vue 3 では、オプション API またはコンポジション API を使用してライフサイクル メソッドを定義できます。 Options API はコンポーネント オプションを定義する従来の方法ですが、Composition API はより柔軟でモジュール式のアプローチを提供し、特に複雑なアプリケーションに役立ちます。

ライフサイクルメソッド

以下は、Vue コンポーネントのライフサイクル段階を示す図です。

作成前

• オプション API: 必要ありません
• 合成 API: 必要ありません

このフックは、コンポーネント インスタンスが作成される前に呼び出されます。

作成されました

• オプション API: 必要ありません
• 合成 API: 必要ありません

このフックは、コンポーネント インスタンスの作成後に呼び出されます。

マウント前

• オプション API: beforeMount
• 合成 API: onBeforeMount

このフックは、コンポーネントが DOM にマウントされる直前に呼び出されます。

例:

<script>
export default {
  beforeMount() {
    console.log('Component is about to be mounted');
  }
}
</script>

<script setup>
import { onBeforeMount } from 'vue';

onBeforeMount(() => {
  console.log('Component is about to be mounted');
});
</script>

取り付けられた

• オプション API: マウントされました
• 合成 API: onMounted

このフックは、コンポーネントが DOM にマウントされるときに呼び出されます。

例:

<script>
export default {
  mounted() {
    console.log('Component has been mounted');
  }
}
</script>

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  console.log('Component has been mounted');
});
</script>

更新前

• オプション API: beforeUpdate
• Composition API: onBeforeUpdate

このフックは、コンポーネントが更新される前に呼び出されます。

例:

<script>
export default {
  beforeUpdate() {
    console.log('Component is about to update');
  }
}
</script>

<script setup>
import { onBeforeUpdate } from 'vue';

onBeforeUpdate(() => {
  console.log('Component is about to update');
});
</script>

更新されました

• オプション API: 更新されました
• コンポジション API: onUpdated

このフックはコンポーネントの更新後に呼び出されます。

例:

<script>
export default {
  beforeMount() {
    console.log('Component is about to be mounted');
  }
}
</script>

<script setup>
import { onBeforeMount } from 'vue';

onBeforeMount(() => {
  console.log('Component is about to be mounted');
});
</script>

アンマウント前

• オプション API: beforeUnmount
• 合成 API: onBeforeUnmount

このフックは、コンポーネントがアンマウントされる直前に呼び出されます。

例:

<script>
export default {
  mounted() {
    console.log('Component has been mounted');
  }
}
</script>

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  console.log('Component has been mounted');
});
</script>

アンマウントされた

• オプション API: アンマウント
• 合成 API: onUnmounted

このフックは、コンポーネントがアンマウントされた後に呼び出されます。

例:

<script>
export default {
  beforeUpdate() {
    console.log('Component is about to update');
  }
}
</script>

<script setup>
import { onBeforeUpdate } from 'vue';

onBeforeUpdate(() => {
  console.log('Component is about to update');
});
</script>

エラーがキャプチャされました

• オプション API: errorCaptured
• 合成 API: onErrorCaptured

このフックは、子コンポーネントからエラーがキャプチャされたときに呼び出されます。

例:

<script>
export default {
  updated() {
    console.log('Component has been updated');
  }
}
</script>

<script setup>
import { onUpdated } from 'vue';

onUpdated(() => {
  console.log('Component has been updated');
});
</script>

レンダリング追跡

• オプション API: renderTracked
• コンポジション API: onRenderTracked

このフックは、レンダリング中にリアクティブな依存関係が追跡されるときに呼び出されます。

例:

<script>
export default {
  beforeUnmount() {
    console.log('Component is about to be unmounted');
  }
}
</script>

<script setup>
import { onBeforeUnmount } from 'vue';

onBeforeUnmount(() => {
  console.log('Component is about to be unmounted');
});
</script>

レンダリングトリガー

• オプション API: renderTriggered
• コンポジション API: onRenderTriggered

このフックは、リアクティブな依存関係がレンダリングをトリガーするときに呼び出されます。

例:

<script>
export default {
  unmounted() {
    console.log('Component has been unmounted');
  }
}
</script>

<script setup>
import { onUnmounted } from 'vue';

onUnmounted(() => {
  console.log('Component has been unmounted');
});
</script>

まとめ

Vue 3 のライフサイクル メソッドを理解して利用することは、コンポーネントのライフサイクルのさまざまな段階を管理するために重要です。 Options API を好むか、Composition API を好むかにかかわらず、Vue 3 は、コンポーネントの動作を効果的に制御するのに役立つ包括的なフックのセットを提供します。これらのライフサイクル方法をマスターすることで、より効率的で保守しやすい Vue アプリケーションを作成できます。

コーディングを楽しんでください! ?

ご質問がございましたら、お気軽にお尋ねください。

私の投稿が気に入ったら、次のサポートをしてください:

以上がVue 3 のライフサイクル メソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。