MENU
  1. ホーム
  2. JS
  3. Vue.js
  4. ライフサイクルフック

ライフサイクルフック

Vue.js
2024.06.02

ライフサイクルフックは、Vueコンポーネントが作成、更新、破棄される各フェーズで実行される関数です。

種類説明
beforeCreateコンポーネント生成後
createdリアクティブデータ準備後
beforeMountテンプレートのコンパイル後
mountedページマウント後
beforeUpdate再描画前
Updated再描画後
beforeUnmountコンポーネント破棄後
unmounted子コンポーネントやハンドラ破棄後
ライフサイクルフック
記法

v-on:イベント.システムキー修飾子=”イベント名”
@イベント.システムキー修飾子=”イベント名”

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ライフサイクルフックについて</title>
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <div id="app">
      <p class="status" id="created"></p>
      <p class="status" id="mounted"></p>
      <p class="status" id="updated"></p>
      <p class="status" id="unmounted"></p>
      <button @click="updateMessage">メッセージを更新</button>
      <button @click="destroyComponent">コンポーネントを削除</button>
      <p>{{ message }}</p>
    </div>
    <!-- CDN -->
    <script src="CDNのURL"></script>
    <script src="./main.js"></script>
  </body>
</html>
const app = Vue.createApp({
  data() {
    return {
      message: "こんにちは、Vue 3!",
    };
  },
  created() {
    this.$nextTick(() => {
      this.setStatus("created", "コンポーネントが作成されました！");
    });
  },
  mounted() {
    this.setStatus("mounted", "コンポーネントがDOMにマウントされました！");
  },
  updated() {
    this.$nextTick(() => {
      this.setStatus("updated", "コンポーネントが更新されました");
    });
  },
  beforeUnmount() {
    this.$nextTick(() => {
      this.setStatus("unmounted", "コンポーネントが破棄されました！");
    });
  },
  methods: {
    updateMessage() {
      this.message = "メッセージが更新されました！";
    },
    destroyComponent() {
      this.setStatus("unmounted", "コンポーネントが破棄されます！");
      setTimeout(() => {
        app.unmount();
      }, 1000); // 少し待ってからアンマウント
    },
    setStatus(id, message) {
      const element = document.getElementById(id);
      if (element) {
        element.textContent = message;
      }
    },
  },
});

app.mount("#app");
.status {
  font-size: 1.2em;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f0f0f0;
}
#created {
  background-color: #d1e7dd;
}
#mounted {
  background-color: #cff4fc;
}
#updated {
  background-color: #fff3cd;
}
#unmounted {
  background-color: #f8d7da;
}
button {
  padding: 10px 20px;
  margin-right: 10px;
  font-size: 1em;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: white;
}
button:hover {
  background-color: #0056b3;
}
出力結果

{{ message }}

Vue.js