Vue.jsの処理を期待通りのタイミングで実行させる[beforeCreate〜unmounted]

Vue.jsのライフサイクルを実際に動かしながら、理解していこうと思います。
また、Vue.jsのライフサイクルを理解することで、期待通りのタイミングで処理を実行させることができるようになるのでぜひ理解するようにしましょう。

環境
Vueのライフサイクル
本記事で紹介するライフサイクルフック
beforeCreate〜mountedの流れ
beforeUpdate〜updatedの流れ
beforeUnmount〜unmountedの流れ
まとめ

環境

MacBook Air (macOS Ventura 13.4.1)
Visual Studio Code 1.81.1
Vue CLI 5.0.8
Vue3.2.13
ブラウザ Google Chrome

Vueのライフサイクル

本記事で紹介するライフサイクルフック

ライフサイクルフック名	処理が呼び出されるタイミング
beforeCreate	Vueアプリケーションの初期化処理前
created	Vueアプリケーションの初期化処理後
beforeMount	DOM要素のレンダリング処理前
mounted	DOM要素のレンダリング処理後（コンポーネントの表示状態）
beforeUpdate	データの更新 → DOM要素の再レンダリング処理前
updated	DOM要素の再レンダリング処理後（コンポーネントの再表示状態）
beforeUnmount	コンポーネントの破棄前
unmounted	コンポーネントの破棄後

beforeCreate〜mountedの流れ

⚫︎実行するコードを以下に示します。

[main.js]

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.mount('#app')

[App.vue]

<template>
  <label>名前：</label>
  <input type="text" v-model="name"/>
</template>

<script>

export default {
  name: 'App',
  data: function() {
    return {
      name: "",
    }
  },
  beforeCreate: function() { 
    // Vueアプリケーションの初期化処理前
    console.log("beforeCreate")
  },
  created: function() {
    // Vueアプリケーションの初期化処理後（コンポーネントの表示状態）
    console.log("created")
  },
  beforeMount: function() {
    // DOM要素のレンダリング処理前
    console.log("beforeMount")
  },
  mounted: function() {
    // DOM要素のレンダリング処理後
    console.log("mounted")
  }
}
</script>

<style>
#app {
  text-align: center;
  margin-top: 60px;
}
</style>

⚫︎ブラウザにて画面を表示します。
コンソールの出力から、「①beforeCreate → ②created → ③beforeMount → ④mounted」の順で処理が実行されていることがわかると思います。

beforeUpdate〜updatedの流れ

⚫︎実行するコードを以下に示します。

[main.js]

※「beforeCreate〜mountedの流れ」と同じ

[App.vue]

<template>
  <label>名前：</label>
  <input type="text" v-model="name"/>
</template>

<script>
export default {
  name: 'App',
  data: function() {
    return {
      name: "",
    }
  },
  beforeUpdate: function() {
    // データの更新 → DOM要素の再レンダリング処理前
    console.log("beforeUpdate")
  },
  updated: function() {
    // DOM要素の再レンダリング処理後（コンポーネントの再表示状態）
    console.log("updated")
  }
}
</script>

<style>
#app {
  text-align: center;
  margin-top: 60px;
}
</style>

⚫︎ブラウザにて画面を表示します。
ブラウザにて画面を表示後、入力テキストに文字を入力します。
コンソールの出力から、「①beforeUpdate → ②updated」の順で処理が実行されていることがわかると思います。

※注意
beforeUpdate ・ updatedでは、コンポーネントの状態を変更する処理を実装しないようにしてください。
無限に処理がループされる恐れがあります。

updatedにコンポーネントの状態を変更する処理を実装した場合の例：
①状態を変更　→ ②updatedが起動し、実装した処理が実行 → ③状態が変更される → ④updatedが起動し、実装した処理が実行 → ⑤状態が変更される → ⑥〜 無限に続く 〜

beforeUnmount〜unmountedの流れ

⚫︎実行するコードを以下に記載します。

[main.js]

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.mount('#app')

function unmount () {
    // コンポーネントの破棄
    app.unmount()
}

export default {
    unmount,
};

[App.vue]

<template>
  <label>名前：</label>
  <input type="text" v-model="name"/><br><br>
  <button v-on:click="clickUnmount">破棄</button>
</template>

<script>
import main from './main'

export default {
  name: 'App',
  data: function() {
    return {
      name: "",
    }
  },
  methods: {
    clickUnmount: function() {
      // コンポーネントの破棄を実行
      main.unmount()
    }
  },
  beforeUnmount: function() {
    // コンポーネントの破棄前
    console.log("beforeUnmounted")
  },
  unmounted: function() {
    // コンポーネントの破棄後
    console.log("unmounted")
  }
}
</script>

<style>
#app {
  text-align: center;
  margin-top: 60px;
}
</style>

⚫︎ブラウザにて画面を表示します。
ブラウザにて画面を表示後、破棄ボタンをクリックすると画面の入力欄が非表示になります。
コンソールの出力から、「①beforeUnmount → ②unmounted」の順で処理が実行されていることがわかると思います。