【解説】Vue.jsのライフサイクルフックの使い方【Compsition API】

パソ君

・Vue.jsのライフサイクルフックの使い方は？

こんな疑問にお答えします。

ライフサイクルフックは、Vueインスタンスの生成から破棄までの過程で特定のタイミングに実行されるメソッドのことです。

これを用いることで、「レンダリングされる直前に〇〇をしたい」などの実装ができちゃいます。

そのためかなり便利。

今回は自分用のメモとしてライフサイクルフックについてまとめてみました。

ジト

参考にどうぞ

ということで、この記事では「Vue.jsのライフサイクルフックの使い方」について解説していきます！

【解説】Vue.jsのライフサイクルについて【Compsition API】

ライフサイクルとは？

Vueのライフサイクルとは、インスタンスが生成〜破棄までの一連の流れのこと。

そしてライフサイクルフックとは、その一連の流れの特定のタイミングで実行されるメソッドを指します。

これにより特定タイミングで操作が可能になります。

ライフサイクルフックの図

主なライフサイクルフックを記述した図がこちら（※大まかな流れとなります）
↓

主にこのタイミングでライフサイクルフックが存在します。

【解説】Vue.jsのライフサイクルフックの使い方【Compsition API】

先述した図のライフサイクルフックがこちら↓

順に見ていきましょう。

①：「onBeforeMount」

「onBeforeMount」はマウントされる直前に実行されるライフサイクルフックのこと。

ちなみにマウントは、VueコンポーネントがDOMに挿入され、画面に表示されるプロセスです。

ようはコンポーネントが画面に表示される直前ですね。

コードの書き方

import { onBeforeMount } from 'vue';

onBeforeMount(() => {
  console.log('onBeforeMount')
})

②：「onMounted」

「onMounted」はマウントされた直後に実行されるライフサイクルフックのこと。

ようはコンポーネントが画面に表示された直後ですね。

コードの書き方

import { onMounted } from 'vue';

onMounted(() => {
  console.log('onMounted')
})

③：「onBeforeUpdate」

「onBeforeUpdate」は再レンダリングが行われる直前に実行されるライフサイクルフックのこと。

例えばクリックしたら数値（count）が増えるボタンがあったとします。

<script setup lang="ts">
import { ref } from 'vue';

const count = ref(0);
</script>

<template>
  <p>{{ count }}</p>
  <button @click="count++">ボタン</button>
</template>

この場合、ユーザーがボタンをクリックして数値が増える直前のタイミングになりますね。

コードの書き方

import { onBeforeUpdate } from 'vue';

onBeforeUpdate(() => {
  console.log('onBeforeUpdate')
})

④：「onUpdated」

「onUpdated」は再レンダリングが完了した直後に実行されるライフサイクルフックのこと。

例えばクリックしたら数値（count）が増えるボタンがあったとします。

<script setup lang="ts">
import { ref } from 'vue';

const count = ref(0);
</script>

<template>
  <p>{{ count }}</p>
  <button @click="count++">ボタン</button>
</template>

この場合、ユーザーがボタンをクリックして数値が増えて再描画された直後になりますね。

コードの書き方

import { onUpdated } from 'vue';

onUpdated(() => {
  console.log('onUpdated')
})

⑤：「onBeforeUnmount」

「onBeforeUnmount」はアンマウントされる直前に実行されるライフサイクルフックのこと。

ちなみにアンマウントは、VueコンポーネントがDOMから削除され、画面から取り除かれるプロセスです。

ようはコンポーネントが削除される直前ですね。

コードの書き方

import { onBeforeUnmount } from 'vue';

onBeforeUnmount(() => {
  console.log('onBeforeUnmount')
})

⑥：「onUnmounted」

「onUnmounted」はアンマウントされた直後に実行されるライフサイクルフックのこと。

ようはコンポーネントが削除される直後ですね。

コードの書き方

import { onUnmounted } from 'vue';

onUnmounted(() => {
  console.log('onUnmounted')
})

【解説】Vue.jsのライフサイクルフック・デバック用【Compsition API】

先述したライフサイクルフック以外にも、実はデバック用のフックが存在します。

動作を監視したり、パフォーマンスを最適化したいときに役立ちます。

それがこちら↓

流れとしてはこう（※大まかな流れとなります）
↓

順に見ていきましょう。

①：「onRenderTracked」

「onRenderTracked」はリアクティブ変数が追跡されたときに実行されるライフサイクルフックのこと。

ようはリアクティブ変数の初回アクセス時ですね。

コードの書き方

引数を取り、値を取ることで何が検知されたかなど確認することができます。

import { ref, onRenderTracked } from 'vue';

onRenderTracked((e) => {
  
});

例として下記コードを実装すると、、

<script setup lang="ts">
import { ref, onRenderTracked } from 'vue';

const count = ref(0);
const toggle = ref(true);
onRenderTracked((e) => {
  console.log('Render tracked:', e.target.value);
});

</script>

<template>
  <p>{{  count }}</p>
  <button @click="count++">ボタン</button>
  <p>{{ toggle }}</p>
  <button @click="toggle = !toggle">{{ toggle }}</button>
</template>

最初のレンダリング処理でコンソールログに下記が反映されます。

リアクティブ変数の初回アクセス時の値を取得できました。

（実際e.target.valueと打つと、 vs code上で.valueに波線が入りましたが。。オブジェクトにないとのこと。。）

②：「onRenderTriggered」

「onRenderTriggered」はリアクティブ変数の変更により、コンポーネントが再レンダリングされるときに実行されるライフサイクルフックのこと。

コードの書き方

引数を取り、値を取ることで何が再レンダリングされたかなど確認することができます。

import { ref, onRenderTriggered } from 'vue';

onRenderTriggered((e) => {
  
});

例として下記コードを実装。

<script setup lang="ts">
import { ref, onRenderTriggered } from 'vue';

const count = ref(0);
const toggle = ref(true);
onRenderTriggered((e) => {
  console.log('Render triggered:', e);
});

</script>

<template>
  <p>{{  count }}</p>
  <button @click="count++">ボタン</button>
  <p>{{ toggle }}</p>
  <button @click="toggle = !toggle">{{ toggle }}</button>
</template>

「ボタン」を５回クリック後、「true falseボタン」を３回クリックした結果のコンソールがこちら↓

クリックしてリアクティブ変数が変更されたときに実行され、値を取得しているのがわかりますね。

ちなみに「onRenderTriggered」は、newValueというプロパティが存在します。

これのおかげで、何の値に変更されたかを確認することが可能です。

【解説】Vue.jsのライフサイクルフックの使い方【Compsition API】：まとめ

主なフックの大まかな流れ

デバック用フックを入れた大まかな流れ

ジト

ライフサイクルフックを使う時はためしてみてね！

コーディング知識を
『チート級』に得れる教材を作成！

見てみる⋙